cloner deux fois le bouton jquery et faire en sorte que les deux fonctionnent pour la même tâche

Question

J'ai un bouton que je souhaite cloner en jquery afin d'en avoir deux, en utilisant les deux boutons pour effectuer la même tâche ; cependant, lorsque j'exécute ce code, seul un des boutons fonctionne et l'autre pas.
J'ai vérifié en essayant d'utiliser true comme paramètre et ça ne marche toujours pas. toute aide serait très appréciée

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>

Answer 1

Attribut id doit être unique dans un document, utilisez classe à la place. Pour attacher un élément créé dynamiquement, utilisez on() .

Essayez la méthode suivante :

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>