Создание Повторные полей в JQuery

Question

$(documnet).ready(function(){ 
 
$('#more_finance').click(function(){ 
 
           var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstName" class="control-label">Finance Contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="Finance Contact" class="form-control" autofocus></div>\n\ 
 
            <a href="#" class="delete_png"><img src="/img/deleted-box.png"></a></div>'; 
 
$(add_new).insertAfter("#finance_1"); 
 
}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group finance-contact" id="finance_1"> 
 
        <div class="col-sm-12"> 
 
         <label for="firstName" class="control-label">Finance Contact</label> 
 
        </div> 
 
        <div class="col-sm-12"> 
 
         <input type="text" id="finance1" name="finance[]" placeholder="Finance Contact" class="form-control" autofocus> 
 
        </div> 
 
      </div> 
 
<div class="col-sm-12"> 
 
      <input type="button" id="more_finance" value="Add More"> 
 
      </div>

Я хочу, чтобы этот код вставить несколько, когда нажмите кнопку Добавить кнопки, а также удалить повторяющиеся поля

Answer 1

I Найти ответы

jQuery(document).ready(function(){ 
 

 
jQuery('#more_senior').click(function(){ 
 
           var finance_cont1=jQuery('.senior-contact').length; 
 
           var finance_cont=finance_cont1+1; 
 
           var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstName" class="control-label">Senior Mgmt. Contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="Senior Mgmt. Contact" class="form-control" autofocus></div>\n\ 
 
           <a href="#" class="delete_png">Remove</a></div>'; 
 
           jQuery(add_new).insertAfter("#senior_"+finance_cont1); 
 
           delete_fields(); 
 
          
 
          }); 
 
    function delete_fields(){ 
 
          $('.delete_png').on("click",function(){ 
 
            var class_name=jQuery(this).parent().attr('class'); 
 
            class_name=class_name.split(' '); 
 
            var id_name=jQuery(this).parent().attr('id'); 
 
            var finance_cont2=jQuery('.'+class_name[1]).length; 
 
            var finance_cont3=finance_cont2-1; 
 
            var id_first=id_name.split('_'); 
 
            $('#'+id_name).remove(); 
 
            delete_fields(); 
 
         
 
          }); 
 
          } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-4"> 
 
      <h4><strong>Senior Mgmt. Contacts</strong></h4> 
 
      <div class="form-group senior-contact" id="senior_1"> 
 
        <div class="col-sm-12"> 
 
         <label for="firstName" class="control-label">Senior Mgmt. Contact</label> 
 
        </div> 
 
        <div class="col-sm-12"> 
 
         <input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="Senior Mgmt. Contact" class="form-control" autofocus> 
 
        </div> 
 
      </div> 
 
    <div class="col-sm-12"> 
 
      <input type="button" id="more_senior" value="Add More"> 
 
      </div> 
 
    </div>