Несколько клоун-drop javascript

Question

Я пытаюсь использовать клон javaScript и несколько раз удалять функции на странице, но я хотел бы сделать это с помощью одного скрипта. У меня около 20 выпадающих списков, которые должны быть клонированы/удалены из функции на странице настройки, эти выпадающие списки динамически создаются с PHP и MySQL.

Выпадающие списки и кнопки, похоже, имеют правильные имена и увеличивающиеся номера на концах линии. Однако я не уверен, как передать эти имена в файл javaScript ниже. Я был бы признателен за любую помощь, дайте мне знать, если вам нужно что-нибудь еще.

индекс:

$add_button  = '#btnAdd[]'; 
$delete_button  = '#btnDel[]'; 
$cloned_input  = '.clonedInput[]'; 

cloneMultiple.php

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function() { 

    var inputs = 1; 

    $('<?php echo $add_button; ?>').click(function() { 
     $('<?php echo $delete_button; ?>:disabled').removeAttr('disabled'); 
     var c = $('<?php echo $cloned_input; ?>:first').clone(true); 
     $('<?php echo $cloned_input; ?>:last').after(c); 
    }); 

    $('<?php echo $delete_button; ?>').click(function() { 
     if (confirm('continue delete?')) { 
      --inputs; 
      $(this).closest('<?php echo $cloned_input; ?>').remove(); 
      $('<?php echo $delete_button; ?>').attr('disabled',($('<?php echo $cloned_input; ?>').length < 2)); 
     } 
    }); 


}); 
//]]> 
</script> 

Вот пример вывода HTML в соответствии с просьбой

<div style="float:left; width:33%;"><hr/> 
    <input type="button" id="btnAdd2" class="add" style="width:180px;" value="Add Air Hammer" /> 
    <div class="clonedInput2" id="clonedInputed2">Air Hammer 
     <label class="input input-right-small"> 
      <input type="button" class="btnDel delete" id="btnDel2" value="X" disabled="disabled" /> 
       <select id="AirHammer2" name="AirHammer2" style="width:160px;"> 
        <option value="none" selected style="color:gray">None</option> 
       </select> 
     </label> 
    </div> 
</div> 

<div style="float:left; width:33%;"><hr/> 
    <input type="button" id="btnAdd3" class="add" style="width:180px;" value="Add Boiler" /> 
    <div class="clonedInput3" id="clonedInputed3">Boiler 
     <label class="input input-right-small"> 
      <input type="button" class="btnDel delete" id="btnDel3" value="X" disabled="disabled"/> 
       <select id="Boiler3" name="Boiler3" style="width:160px;"> 
        <option value="none" selected style="color:gray">None</option> 
       </select> 
     </label> 
    </div> 
</div> 

PHP

<?php 
    $getEquipment = "SELECT * FROM rbs_equipment_type WHERE name != 'Truck'"; 
     $q_Equipment = $conn->prepare($getEquipment); 
      $q_Equipment->execute(); 
       while($rowEquipment = $q_Equipment->fetch()) 
        { 
        echo' 
        <div style="float:left; width:33%;"><hr/> 
         <input type="button" id="btnAdd'.$rowEquipment['id'].'" class="add" style="width:180px;" value="Add '.$rowEquipment['name'].'" /> 
          <div class="clonedInput'.$rowEquipment['id'].'" id="clonedInputed'.$rowEquipment['id'].'">'.$rowEquipment['name'].' 
           <label class="input input-right-small"> 
            <input type="button" class="btnDel delete" id="btnDel'.$rowEquipment['id'].'" value="X" disabled="disabled" style="width:20px; margin:0px;padding-left:1px;padding-right:1px;padding-top:7px;padding-bottom:7px;"/> 
             <select id="'.$rowEquipment['name'].''.$rowEquipment['id'].'" name="'.$rowEquipment['name'].''.$rowEquipment['id'].'" style="width:160px;"> 
             <option value="none" selected style="color:gray">None</option>'; 
             /*Find Children*/ 

    $getChildren = "SELECT * FROM rbs_equipment_model WHERE model_type_id = ".$rowEquipment['id']; 
     $qChildren = $conn->prepare($getChildren); 
      $qChildren -> execute(); 
       while($rowChildren = $qChildren -> fetch()) 
        { 
         echo "<option value='".$rowChildren['model_id']."'>".$rowChildren['model_name']."</option>"; 
        } 
echo     '</select> 
        </label> 
       </div> 
      </div>'; 
     } 
?> 

Answer 1

Demo: http://jsfiddle.net/1ry9h1e3/1/

Нет идентификаторов, необходимых, вам просто нужно добавить .wrapper класс первый DIV в цикле

<div style="float:left; width:33%;" class="wrapper"> 

Тогда JQuery можно использовать, чтобы найти элементы, необходимые для поиска.

$(document).ready(function() { 
    var inputs = 1; 

    $('.add').click(function() { 
     var $wrapper = $(this).closest('.wrapper'); 
     $wrapper.find('.delete').removeAttr('disabled'); 
     $wrapper.find('.clonedInput:first') 
      .clone(true) 
       .appendTo($wrapper) 
     ; 
    }); 

    $('.delete').click(function() { 
     if (confirm('continue delete?')) { 
      --inputs; 
      var $wrapper = $(this).closest('.wrapper'); 
      $wrapper.find('.delete:first').attr('disabled', $wrapper.find('.delete').length < 2); 
      $(this).closest('.clonedInput').remove(); 
     } 
    }); 
});