Dynamically adding HTML form field using jQuery

Today we are going to see about Dynamically adding HTML form  field using jQuery. this concept is very simple, just i have written form element clone() script. its automatically create html form field. follow below code and live demo also is there. 

Live demo      Download

JavaScript

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     $('#addRow').click(function() {
        var curMaxInput = $('#rows ul li').length;   
        $('#rows li:first')
            .clone()
            .insertAfter($('#rows ul li:last'))
            .find('#firstname').val('')
            .attr({'id': 'firstname' + (curMaxInput + 1),
                   'name': 'firstname' + (curMaxInput + 1)
                  }).closest('.main-gift').find('#firstname').val('')
          return false;
     });          
     $(document).on("click", '.close-gift', function(event) { 
        $(this).parent("li").remove();
     });          
  });
</script>

.clone() - Create a deep copy of the set of matched elements.
.find('#firstname').val('') - Clear the value of new element.

Html

<form  action="#" method="POST">
  <div id="rows">
    <ul>
      <li class="borad">
        <div class="text-danger close-gift">
          <span class="fa fa-times-circle">close X</span>
        </div>
        <p>
          <input type="text" required  placeholder="Enter your first name" 

            id="firstname" name="firstname" />
        </p>        
      </li>
      <p>
        <input type="submit" name="send" value="Submit">
      </p>
    </ul>
  </div>
  <div class="clearfix"></div>
  <h3 id="addRow"><a href="#">[+] Add another person details</a></h3>
</form>

I hope this post help for you. if you any suggestion about above share your comments below.