title: Multiple javascript dropdown clones
body: <p>I am trying to use javaScript clone and remove functions multiple times on a page, but I would like to do it with one script. I have about 20 drop downs that should have the function to be cloned/deleted as part of setup page, these drop downs are created dynamically from PHP and MySQL</p>
  
  <p>The dropdowns and buttons seem to have the correct names and the incremented numbers on the ends line up. However I am not sure how about how to pass those names to the javaScript file below. I'd appreciate any help, let me know if you need anything else.</p>
  
  <p>Index:</p>
  
  <pre><code>$add_button        = '#btnAdd[]';
  $delete_button     = '#btnDel[]';
  $cloned_input      = '.clonedInput[]';
  </code></pre>
  
  <p>cloneMultiple.php</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  $(document).ready(function() {
  
      var inputs = 1; 
  
      $('&lt;?php echo $add_button; ?&gt;').click(function() {
          $('&lt;?php echo $delete_button; ?&gt;:disabled').removeAttr('disabled');
          var c = $('&lt;?php echo $cloned_input; ?&gt;:first').clone(true);
          $('&lt;?php echo $cloned_input; ?&gt;:last').after(c);
      });
  
      $('&lt;?php echo $delete_button; ?&gt;').click(function() {
          if (confirm('continue delete?')) {
              --inputs;
              $(this).closest('&lt;?php echo $cloned_input; ?&gt;').remove();
              $('&lt;?php echo $delete_button; ?&gt;').attr('disabled',($('&lt;?php echo $cloned_input; ?&gt;').length  &lt; 2));
          }
      });
  
  
  });
  //]]&gt;  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a sample of the HTML output as requested</p>
  
  <pre><code>&lt;div style="float:left; width:33%;"&gt;&lt;hr/&gt;
      &lt;input type="button" id="btnAdd2" class="add" style="width:180px;" value="Add Air Hammer" /&gt;
      &lt;div class="clonedInput2" id="clonedInputed2"&gt;Air Hammer
          &lt;label class="input input-right-small"&gt;
              &lt;input type="button" class="btnDel delete" id="btnDel2" value="X" disabled="disabled" /&gt;
                  &lt;select id="AirHammer2" name="AirHammer2" style="width:160px;"&gt;
                      &lt;option value="none" selected style="color:gray"&gt;None&lt;/option&gt;
                  &lt;/select&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left; width:33%;"&gt;&lt;hr/&gt;
      &lt;input type="button" id="btnAdd3" class="add" style="width:180px;" value="Add Boiler" /&gt;
      &lt;div class="clonedInput3" id="clonedInputed3"&gt;Boiler
          &lt;label class="input input-right-small"&gt;
              &lt;input type="button" class="btnDel delete" id="btnDel3" value="X" disabled="disabled"/&gt;
                  &lt;select id="Boiler3" name="Boiler3" style="width:160px;"&gt;
                      &lt;option value="none" selected style="color:gray"&gt;None&lt;/option&gt;
                  &lt;/select&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>&lt;?php
       $getEquipment = "SELECT * FROM rbs_equipment_type WHERE name != 'Truck'";
          $q_Equipment = $conn-&gt;prepare($getEquipment);
              $q_Equipment-&gt;execute();
                  while($rowEquipment = $q_Equipment-&gt;fetch())
                      {
                      echo'
                      &lt;div style="float:left; width:33%;"&gt;&lt;hr/&gt;
                          &lt;input type="button" id="btnAdd'.$rowEquipment['id'].'" class="add" style="width:180px;" value="Add '.$rowEquipment['name'].'" /&gt;
                              &lt;div class="clonedInput'.$rowEquipment['id'].'" id="clonedInputed'.$rowEquipment['id'].'"&gt;'.$rowEquipment['name'].'
                                  &lt;label class="input input-right-small"&gt;
                                      &lt;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;"/&gt;
                                          &lt;select id="'.$rowEquipment['name'].''.$rowEquipment['id'].'" name="'.$rowEquipment['name'].''.$rowEquipment['id'].'" style="width:160px;"&gt;
                                          &lt;option value="none" selected style="color:gray"&gt;None&lt;/option&gt;';
                                          /*Find Children*/
  
      $getChildren = "SELECT * FROM rbs_equipment_model WHERE model_type_id = ".$rowEquipment['id'];
          $qChildren = $conn-&gt;prepare($getChildren);
              $qChildren -&gt; execute();
                  while($rowChildren = $qChildren -&gt; fetch())
                      {
                          echo "&lt;option value='".$rowChildren['model_id']."'&gt;".$rowChildren['model_name']."&lt;/option&gt;";
                      }
  echo                    '&lt;/select&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
             &lt;/div&gt;';
          }
  ?&gt;
  </code></pre>