On Click a Button Add more duplicate Content with blank input values in Jquery

 

<!-- For HTML Section -->

<div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="form-group">
         <span class="btn btn-sm btn-info pull-right add-more-guest-btn">Click Add Guest</span>
      </div>
   </div>
</div>


<div class="row ">
   <div class="col-lg-12 col-md-12 guestuser-section-primary" style="display:none;" >
      <div class="row guestuser-block">
          <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
              <div class="form-group">
                 <input type="text" class="form-control" name="user_name[]" value="" > 
 
              </div>
          </div>
         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
             <div class="form-group">
                 <input type="text" class="form-control" name="user_email[]" value="" > 
             </div>
         </div>
      </div>
   </div>
</div>


<div class="row ">
    <div class="col-lg-12 col-md-12 guestuser-section-secondary" >
    </div> 
</div>

<!-- For HTML Section / -->

 

 

 

<!-- For Script Section / -->

<script type="text/javascript">
$(function(){
    $('.add-more-guest-btn').on('click', function(){

        var addmore_main = $('.guestuser-block').eq(0).clone(true);

        addmore_main.find("input").val("");

        $('.guestuser-section-secondary').append(addmore_main);
 
    });
});
</script>

<!-- For Script Section / -->

 

Leave a Reply

Your email address will not be published. Required fields are marked *