Membuat dynamic form field add and remove in bootstrap

Sedikit berbagi menjelang istirahat :)
kali ini saya akan membahas bagaimana cara membuat sebuah dynamic form atau form yang dinamis. Yang di maksud dinamis di sini adalah form yang akan di buat kali ini adalah sebuah form input yang bisa bertambah atau pun di kurangi jumlah inputannya sesuai kebutuhan.

Spesifikasi kode :

• bootstrap 3.3.2

Tanpa banyak basa-basi, simaklah sintak dan demonya di bawah ini. Selamat Mencoba :)

<!--bootstrap-->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/started-template.css" rel="stylesheet">
  
<style>
 .entry:not(:first-of-type) {
  margin-top: 10px;
 }
</style>

<div class="container">

 <div class="starter-template">
    <h1>#Dynamic form field add and remove in bootstrap</h1><hr>
  <div class="controls"> 
   <input class="form-control" name="idmyproject" type="hidden" value="<?php echo $val->id;?>">
   <div class="form-group">
    <div class="entry input-group">
     <input class="form-control" name="" type="text" placeholder="Entry..." required>
     <span class="input-group-btn">
      <button class="btn btn-success btn-add" type="button">
       <span class="glyphicon glyphicon-plus"></span>
      </button>
     </span>
    </div>
   </div> 
  </div>
 </div>

</div><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

<script>
 $(function()
  {
   $(document).on('click', '.btn-add', function(e)
   {
    e.preventDefault();

    var controlForm = $('.controls:first'),
     currentEntry = $(this).parents('.entry:first'),
     newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
     .removeClass('btn-add').addClass('btn-remove')
     .removeClass('btn-success').addClass('btn-danger')
     .html('<span class="glyphicon glyphicon-minus"></span>');
   }).on('click', '.btn-remove', function(e)
   {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
   });
  }
 );
</script>

DEMO

Mungkin artikel hanya cukup sampai disini saja, mohon maaf jika ada kekurangan dalam pembuatan demo atau yang lainnya.

Terimakasih :)