title: How to apply events on cloned elements?
body: <p>Can someone please help me with this?</p>
  
  <p>I am trying to make an ordering system, it's all going good and well, but our adviser pointed out that we need to let the user have an option to order multiple items on one transaction. That messed me up. I googled a lot about JQueries and JScripts, but I've finally hit a dead end.</p>
  
  <p>What I have right now are:</p>
  
  <p>HTML(orderform.html):</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; &lt;link rel="stylesheet"
          type="text/css" 
          href="css/contentFrame.css"&gt;
  
          &lt;script src="jscript/protoScript.js"&gt;&lt;/script&gt; 
          &lt;script src="jscript/jquery-1.11.3.js"&gt;&lt;/script&gt;
          &lt;script src="jscript/JQueryTest.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;body&gt;
      &lt;div class="formBlock"&gt;
          &lt;h2 id="formHeader"&gt;Order Form&lt;/h2&gt;
          &lt;form method="POST" action="orderInfoReceiver.php"&gt;
              &lt;table align="center"&gt;
                  &lt;tr&gt;
                      &lt;td height="100%"&gt;
                          &lt;fieldset&gt;
                              &lt;legend&gt;Contact Details&lt;/legend&gt;    
                              Last Name:
                              &lt;br&gt;
                              &lt;input type="text" name="lName"&gt;
                              &lt;br&gt;
                              First Name:
                              &lt;br&gt;
                              &lt;input type="text" name="fName"&gt;
                              &lt;br&gt;
                              Middle Name:
                              &lt;br&gt;
                              &lt;input type="text" name="mName"&gt;
                              &lt;br&gt;
                              Email Address: 
                              &lt;br&gt;
                              &lt;input type="text" name="email"&gt;
                          &lt;/fieldset&gt; 
                      &lt;/td&gt;
                      &lt;td height="100%"&gt;
                          &lt;fieldset&gt;
                              &lt;br&gt;
                              &lt;legend&gt;Product Information&lt;/legend&gt;  
                              &lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;
  
                              Item Name: 
                              &lt;br&gt;
                              &lt;select id="product" name="product" onchange="setOptions()"&gt;
                                  &lt;option&gt;Please Select an Item
                                  &lt;option&gt;Dry Chemical
                                  &lt;option&gt;HCFC 123 (Manual)
                                  &lt;option&gt;HCFC 123 (Therman)
                                  &lt;option&gt;HCFC 123 (Ceiling)
                                  &lt;option&gt;HCFC 236 fa (Manual)
                                  &lt;option&gt;HCFC 236 fa (Therman)
                                  &lt;option&gt;HCFC 236 fa (Ceiling)
                                  &lt;option&gt;AFFF (Steel Cylinder)
                                  &lt;option&gt;AFFF (Stainless Cylinder)
                                  &lt;option&gt;CO2 (Carbon Dioxide)
                              &lt;/select&gt;
                              &lt;br&gt;
                              Capacity:
                              &lt;br&gt;
                              &lt;select id="capacity" name="capacity"&gt;
                                  &lt;option&gt; --
                              &lt;/select&gt;    
                              &lt;input type="radio" name="type" value="New"&gt;New &lt;input type="radio" name="type" value="Refill"&gt;Refill
                              &lt;br&gt;
                              &lt;br&gt;
                              Quantity:
                              &lt;br&gt;
                              &lt;input type="number" min="0" name="quantity"&gt;
                              &lt;br&gt;
                              &lt;br&gt;
                              &lt;br&gt;
                              &lt;/div&gt;
                              &lt;input type="button" id="btnAdd" value="+"&gt; &lt;input type="button" id="btnDel" value="-"&gt; 
                          &lt;/fieldset&gt; 
                      &lt;/td&gt;
                      &lt;td height="100%"&gt;
                          &lt;fieldset&gt;
                              &lt;br&gt;
                              &lt;br&gt;
                              &lt;legend&gt;Address&lt;/legend&gt; 
                              Street: 
                              &lt;br&gt;
                              &lt;input type="text" name="street"&gt; 
                              &lt;br&gt;
                              &lt;br&gt;
                              City: 
                              &lt;br&gt;
                              &lt;input type="text" name="city"&gt; 
                              &lt;br&gt;
                              &lt;br&gt;
                              &lt;br&gt;
                          &lt;/fieldset&gt; 
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;  
              &lt;center&gt;&lt;input type="submit" value="Submit"&gt;&lt;/center&gt;
          &lt;/form&gt;
          &lt;br&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><br>
  JQuery(JQueryTest.js) taken from <a href="http://charlie.griefer.com" rel="nofollow">http://charlie.griefer.com</a> and modified a bit. I got a lot of codes for cloning, but this is the only one I managed to get working with my current forms.</p>
  
  <pre><code> $(document).ready(function() {
          $('#btnAdd').click(function() {
              var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
              var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
  
              // create the new element via clone(), and manipulate it's ID using newNum value
              var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);
  
              // manipulate the name/id values of the input inside the new element
              newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
  
              // insert the new element after the last "duplicatable" input field
              $('#input' + num).after(newElem);
  
              // enable the "remove" button
              $('#btnDel').removeAttr('disabled');
  
              // business rule: you can only add 5 names
              if (newNum == 5)
                  $('#btnAdd').attr('disabled','disabled');
          });
  
          $('#btnDel').click(function() {
              var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
              $('#input' + num).remove();     // remove the last element
  
              // enable the "add" button
              $('#btnAdd').removeAttr('disabled');
  
              // if only one element remains, disable the "remove" button
              if (num-1 == 1)
                  $('#btnDel').attr('disabled','disabled');
          });
  
          $('#btnDel').attr('disabled','disabled');
      });
  </code></pre>
  
  <p><br>
  JScript(protoScript.js) I also got this from searching, but I forgot what site:</p>
  
  <pre><code>function addOption(selectId) {
      var x = document.getElementById(selectId);
      var y = new Option('Test option W3C');
      x.add(y,x.options[x.options.length]);
      // for IE use x.add(y,2);
  }
  
  
  function appendOptionLast(selectID, num){
      var elSel = document.getElementById(selectID);
  
      var elOptNew = document.createElement('option');
      elOptNew.text = num;
      elOptNew.value = num;
  
  
      try {
          elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
      }
      catch(ex) {
          elSel.add(elOptNew); // IE only
      }
  }
  
  function removeAllOptions(selectID){
      var elSel = document.getElementById(selectID);
      elSel.options.length = 0
      if (elSel.length &gt; 0){
          elSel.remove(0);
      }
  }
  
  function addAllOptions(selectID, values){
      var arrayLength = values.length;
      for (var i = 0; i &lt; arrayLength; i++) {
          appendOptionLast(selectID,values[i]);
      }
  }
  
  
  function setOptions(){
      var product = document.getElementById("product");
      // removeAllOptions('capacity');
      document.getElementById('capacity').options.length = 0
      var selIndex = product.selectedIndex;
      if(selIndex == 1)
          addAllOptions('capacity', ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
      else if(selIndex == 2){
          addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
      }
      else if(selIndex == 3){
      addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs"]);
      }
      else if(selIndex == 4){
          addAllOptions('capacity', ["10 lbs", "20 lbs"]);
      }
      else if(selIndex == 5){
          addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
      }
      else if(selIndex == 6){
          addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
      }
      else if(selIndex == 7){
          addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
      }
      else if(selIndex == 8){
          addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
      }
      else if(selIndex == 9){
          addAllOptions('capacity', ["20 lbs", "25 lbs", "50 lbs"]);
      }
      else if(selIndex == 10){
          addAllOptions('capacity', ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
      }
      else{
          addAllOptions('capacity', ["--"]);
      }
  }
  </code></pre>
  
  <p><br>
  <strong>I hit a dead end with having the event <code>onchange</code> on <code>&lt;select id='product&gt;'</code> to work with the cloned forms too.</strong></p>
  
  <p>I have also tried using <code>clone(true, true)</code> but could not make it work.</p>
  
  <p>I got custom css too, it only contains very basic design, so I will deem it unnecessary to include.</p>
  
  <p>Please note that we were only taught basic HTML -up until forms if I recall, basic PHP, Java, C#, and SQL. This is my first try to code JScripts and JQueries and I am having a hard time which is which.</p>