Jquery added input not passing data to server

In my div

c, class

sets

I want to dynamically attach another set of input fields to the last element reps

and kilos

so that the user can add as many as he needs. I did it with my jQuery

code below, but I ran into a problem when I submit the input. Only the values ​​that form the original fields input

are sent to the server.

How can I write my code jQuery

so that input from new divs is also sent?

HTML form:

  <!-- Main body of page -->
  <main role="main">
      <div id="description">
          <p>Fill in your workout and then click <i>Save Workout</i> when you are done.</p>
          <p>To add an extra group for <strong>reps</strong> and <strong>kg's</strong>, click the <i class="fa fa-plus-circle"></i> sign on your screen.</p>
      </div>

      <div id="forms">
          <form id="workout-form" name="workout-form" action="newworkout/workout" method="POST" enctype="application/x-www-form-urlencoded">

              <div class="workouts">
                  <label for="exercise" class="labels"><strong>Exercise</strong></label> <input type="text" name="exercise" id="exercise" placeholder="Which exercise?" autofocus />
                  <label for="musclegroup" class="labels"><strong>Muscle-Group</strong></label> <input type="text" name="musclegroup" id="musclegroup" placeholder="Which muscle-group?" />

                  <div class="sets">
                      <label for="reps" class="labels">Reps</label> <input type="text" name="reps" id="reps" class="reps-column" placeholder="How many reps?" />
                      <label for="kilos" class="labels">Kg's</label> <input type="text" name="kilos" id="kilos" class="kilos-column" placeholder="How much Kg?" />
                  </div>
                  <hr>
              </div>

              <button id="add-set"class="add-buttons" type="button"><i class="fa fa-plus-circle fa-2x"></i></button>
              <button id="submit-workout" type="submit"><strong>Save Workout</strong></button>
          </form>
      </div>

  </main>

      

        
        
        
      

    

jQuery:

$(document).ready(function() {
  console.log('Document ready');

  // function to add sets to specific exercise
  $('#add-set').on('click', function() {
    console.log ('Button add-set clicked');

        var htmlSets = '<div class="sets">' +
            '<label for="reps" class="labels">Reps</label><input type="text" id="reps" class="reps-column" placeholder="How many reps?" />' +
            '<label for="kilos" class="labels">Kg\'s</label><input type="text" id="kilos" class="kilos-column" placeholder="How much Kg?" />' +
        '</div>';

    $('div.sets:last').append(htmlSets);
  });

});