Add dynamic form on click event

Dynamic html field generation using jQuery

by Sajeev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<form id="form1" name="form2" action="toonepage.php">
<div id="add_company_div" class="addcomp" style='display: none;'>
  <div class="col-sm-6 col-xs-12 own_pad">
  <select name="select2[]" size="3" multiple="multiple">
         <option value="11">eleven</option>
        <option value="12">twelve</option>
        <option value="13">thirette</option>
        <option value="14">fourteen</option>
        <option value="15">fifteen</option>
        <option value="16">sixteen</option>
        <option value="17">seventeen</option>
        <option value="18">eighteen</option>
        <option value="19">nineteen</option>
        <option value="20">twenty</option>     
  </select>
  </div>

  <div id="hide_company" class="col-sm-6 col-xs-12 own_pad minus">
    Click this DIV to Close
  </div>
</div>
<input type="hidden" id="start_count_value"  name="start_count_value" value="" />	
<input type="hidden" name="class_count" class="class_count" value="" />
<div class="box-footer clearfix no-border no_pad comp-foot">
  <div id="add_company" class="btn btn-success btn-sm pull-left">Generate Multiple Select Boxes</div>
</div>
   <input type="submit" id="submit" class="btn btn-primary"  name="submit" value="Submit the Form" />
</form>

JavaScript

$(document).ready(function(){
    
    
if($('#start_count_value').val())
{
	var i= $('#start_count_value').val();
}
else 
{
	var i=0;
}


    $("#add_company").click(function(){
		      $('#add_company_div').before($("#add_company_div").clone().attr("id","add_company_div" + i));
		      $("#add_company_div" + i).css("display","block");
		      $("#add_company_div" + i + " :input").each(function(){
		      $(this).attr("name",$(this).attr("name") + i);
		      $(this).attr("id",$(this).attr("id") + i);
		      $(this).attr("count",i); 
                 
          });
        
		    $("input[name=class_count]").remove();
		    $('#add_company_div').append('<input type="hidden" class="class_count" name="class_count" value="'+i+'" />');  
         i++;
	 });
	 

	 $(document).on("click","#hide_company",function() {
  	   $(this).closest(".addcomp").remove();  
  	 });
    
    });