title: Running Javascript in a Cloned Form
body: <p>I have implemented the extend form function. I am trying to run another javascript function within a cloned form but it doesn't work.</p>
  
  <p>If that bootstrap js runs, when a user selects a radio, the radio text would change as in data-complete-text attribute.</p>
  
  <p>The script has worked like a charm when it's not placed in the cloned form.</p>
  
  <p>The bootstrap js fyi<br>
  $().button(string): <a href="http://getbootstrap.com/javascript/#buttons" rel="nofollow">http://getbootstrap.com/javascript/#buttons</a></p>
  
  <p>Here's the extend form HTML with bootstrap js I'm trying to run (marked in the codes below):</p>
  
  <pre><code>&lt;span id="readroot" style="display: none"&gt;
  &lt;input class="btn btn-default" type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-3"&gt;
          &lt;div class="" data-toggle="buttons"&gt;
              &lt;label&gt;&lt;?php echo __('Gender'); ?&gt;&lt;/label&gt;&lt;br&gt;
              &lt;input type="hidden" name="gender" id="PostGender_" value=""&gt;
              &lt;label class="btn btn-default" id="male" data-complete-text="&lt;?php echo __('Male Selected'); ?&gt;"&gt;
                  &lt;input type="radio" name="gender" id="PostGender0" value="0" autocomplete="off"/&gt; &lt;?php echo __('Male'); ?&gt;
              &lt;/label&gt;
              &lt;label class="btn btn-default" id="female" data-complete-text="&lt;?php echo __('Female Selected'); ?&gt;"&gt;               
                  &lt;input type="radio" name="gender" id="PostGender1" value="1" autocomplete="off"/&gt; &lt;?php echo __('Female'); ?&gt;
              &lt;/label&gt;
          &lt;/div&gt;  
          &lt;script&gt; &lt;!-- bootstrap js --&gt;
              $('#male1, #female1').click(function () {
                  $(this).button('complete') 
              });
              $('#male1').click(function () {
                  $('#female1').button('reset') 
              });
              $('#female1').click(function () {
                  $('#male1').button('reset')
              }); 
          &lt;/script&gt;               
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/span&gt;
  &lt;span id="writeroot"&gt;&lt;/span&gt;        
  &lt;input class="btn btn-default" type="button" onclick="moreFields()" value="Give me more fields!" /&gt;
  </code></pre>
  
  <p>the Javascript:</p>
  
  <pre><code>var counter = 1;
  function moreFields() {
      counter++;
      var newField = document.getElementById('readroot').cloneNode(true);
      newField.id = '';
      newField.style.display = 'block';
      var newFields = newField.querySelectorAll('[name]');
          for (var i=0;i&lt;newFields.length;i++) {
              var theNames = newFields[i].name
              if (theNames)
                  newFields[i].name = "data[Student][" + counter + "][" + theNames + "]";
                  //console.log(newFields[i].name);
      }
      var newFields2 = newField.querySelectorAll('[id]');
          for (var i=0;i&lt;newFields2.length;i++) {
              var theNames2 = newFields2[i].id;
              if (theNames2)
                  newFields2[i].id = theNames2 + counter;
                  //console.log(newFields2[i].id);
  
      }       
      var insertHere = document.getElementById('writeroot');
      insertHere.parentNode.insertBefore(newField,insertHere);
  }
  </code></pre>
  
  <p>I have checked from console that the field ids are named 'male1', 'female1', just as I wanted. The bootstrap js should have found the label with the corresponding id.</p>
  
  <p>P.S. The next question would be to make the js parameter to be incremented so it would be like male1, male2, male3 as the form is cloned. But that's out of the scope of this problem.</p>