Display dynamic field inputs in JSON - Jquery

Question

I've created a form where a user can select 'Add Leg' and it generates another set of the same questions, however all of these inputs won't output into the JSON only the first set of questions will. How do I loop through each div and populate the JSON and store in an Array to reference later?

Here is my code:

CONSOLE LOG OUTPUT

overUnder[]: "Over"
playerName[]: "dsf"
statAmount[]: "123"
statType[]: "Points"

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div id="legs[]""><input type="text" id="name" name="playerName[]" placeholder="Enter player name" required=""/><select class="statType" id="statType" name="statType[]"><option id="1">Points</option><option id="2">Rebounds</option><option id="3">Assists</option></select><select class="overUnder" id="overUnder" name ="overUnder[]"><option id="over">Over</option><option id="under">Under</option></select><input type="number" id="amount" class="amount" name="statAmount[]" required=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">Remove Leg</a></div>'
  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

function convertFormToJSON(form) {
  const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
  const json = {};
  $.each(array, function() {
    json[this.name] = this.value || "";
  });
  return json;
}

$("#bet-slip").on("submit", function(e) {
  e.preventDefault();
  const form = $(e.target);
  console.log(form);
  const json = convertFormToJSON(form);
  console.log(json);
});

<form id="bet-slip">
  <div class="field_wrapper">
    <div id="legs[]">
      <input type="text" id="name" name="playerName[]" placeholder="Enter player name" required="" />
      <select class="statType" id="statType" name="statType[]">
        <option id="1">Points</option>
        <option id="2">Rebounds</option>
        <option id="3">Assists</option>
      </select>
      <select class="overUnder" id="overUnder" name="overUnder[]">
        <option id="over">Over</option>
        <option id="under">Under</option>
      </select>
      <input type="number" id="amount" class="amount" name="statAmount[]" required="" />
      <a href="javascript:void(0);" class="add_button" title="Add field">Add Leg</a>
    </div>
  </div>
  <button type="submit">Submit Legs</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>