cloning jquery button twice and having both of them working doing the same task

Question

i have a button that i wish to clone in jquery so that i can have two of them, using both buttons to do the same task however when i run this code only one of the buttons actually works and the other does not.
I have looked it up trying to use true as a parameter and it still doesnt work any help would be much appreciated

jQuery(function($) {
  var $button = $('#addEvent'),
    $row = $('.newEvent').clone();

  $button.click(function() {
    $row.clone().insertBefore($button);
  });
});


jQuery(function($) {
  var $button = $('#newPupil'),
    $row = $('.newParticipant').clone();

  $button.click(function() {
    $row.clone().insertBefore($button);
  });
});

<form>
  <div class="newEvent">
    <fieldset id="ResultSheet">
      <legend>Add Event</legend>
      Event: <br>
      <select name="Events" id="Events">
        <option disabled selected value> --SELECT AN OPTION BELOW-- </option>
        <option value="100 Metres">100 Metres</option>
        <option value="200 Metres">200 Metres</option>
        <option value="300 Metres">300 Metres</option>
        <option value="400 Metres">400 Metres</option>
        <option value="800 Metres">800 Metres</option>
        <option value="1500 Metres">1500 Metres</option>
        <option value="400 Metres">400 Metres</option>
        <option value="Hurdels">Hurdels</option>
        <option value="Shot Put">Shot Put</option>
        <option value="Discus">Discus</option>
        <option value="Javelin">Javelin</option>
        <option value="Long Jump">Long Jump</option>
        <option value="High Jump">High Jump</option>
        <option value="Triple Jump">Triple Jump</option>
        <option value="4x100 Metres Relay">4x100 Metres relay</option>
      </select>

      <div class="newParticipant">
        <br> First name: <input type="text" name="fisrtName"> Last Name: <input type="text" name="lastName">
      </div>
      <input type="button" id="newPupil" name="newPupil" value="New participant">
    </fieldset>
  </div>
</form>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

You're cloning an element which contains IDs, resulting in duplicate IDs, which is invalid HTML (resulting in, for example, `$('#newPupil')` selecting only the first) IDs should be **unique** — CertainPerformance, Dec 10 '18 at 09:10
You need to pass `true` to the `$.clone()` function, so it will copy the event handlers too — Washington Guedes, Dec 10 '18 at 09:11
Have you tried using event delegation? Then you don't need to recreate/copy the events as they'd already exist. https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Dec 10 '18 at 09:29

Mamun · Accepted Answer · 2018-12-10T09:40:57.597

Attribute id must be unique in a document, use class instead. To attach dynamically created element use on().

Try the following way:

jQuery(function($){
  var $button1 = $('#addEvent'),
  $row1 = $('.newEvent').clone();
  $button1.click(function(){
    $row1.clone().insertBefore($button1);
  });
  
  var $row2 = $('.newParticipant').clone();
  $('body').on('click', '.newPupil', function(){
    $row2.clone().insertBefore(this);
  });
  
});

<div class="newEvent">
  <fieldset id="ResultSheet">
      <legend>Add Event</legend>
          Event: <br>
      <select name="Events" id="Events">
          <option disabled selected value> --SELECT AN OPTION BELOW-- </option>
          <option value="100 Metres">100 Metres</option>
          <option value="200 Metres">200 Metres</option>
          <option value="300 Metres">300 Metres</option>
          <option value="400 Metres">400 Metres</option>
          <option value="800 Metres">800 Metres</option>
          <option value="1500 Metres">1500 Metres</option>
          <option value="400 Metres">400 Metres</option>
          <option value="Hurdels">Hurdels</option>
          <option value="Shot Put">Shot Put</option>
          <option value="Discus">Discus</option>
          <option value="Javelin">Javelin</option>
          <option value="Long Jump">Long Jump</option>
          <option value="High Jump">High Jump</option>
          <option value="Triple Jump">Triple Jump</option>
          <option value="4x100 Metres Relay">4x100 Metres relay</option>
      </select>

      <div class="newParticipant"> 
          <br>
          First name: <input type="text" name="fisrtName">
          Last Name: <input type="text" name="lastName">
      </div>
      <input type="button" class="newPupil" name="newPupil" value="New participant"> 
  </fieldset>
</div>
<input type="button" id="addEvent" name="addEvent" value="Add Event" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button value="Refresh Page" onClick="refreshPage()">REFRESH</button>
<script src="newButtons.js"></script>

THANKS!! this really helped me progress my project forward – TESTING Dec 10 '18 at 13:35 — TESTING, Dec 10 '18 at 13:35

cloning jquery button twice and having both of them working doing the same task

1 Answers1