Display dynamic field inputs in JSON

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  id="statType" name="statType[]"><option id="1">Points</option><option id="2">Rebounds</option><option id="3">Assists</option></select><select  id="overUnder" name ="overUnder[]"><option id="over">Over</option><option id="under">Under</option></select><input type="number" id="amount"  name="statAmount[]" required=""/><a href="javascript:void(0);"  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 >
    <div id="legs[]">
      <input type="text" id="name" name="playerName[]" placeholder="Enter player name" required="" />
      <select  id="statType" name="statType[]">
        <option id="1">Points</option>
        <option id="2">Rebounds</option>
        <option id="3">Assists</option>
      </select>
      <select  id="overUnder" name="overUnder[]">
        <option id="over">Over</option>
        <option id="under">Under</option>
      </select>
      <input type="number" id="amount"  name="statAmount[]" required="" />
      <a href="javascript:void(0);"  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>

CodePudding user response：

You can reduce the array

function convertFormToJSON(form) {
  const vals = $(form).serializeArray(); // Encodes the set of form elements as an 
  return vals.reduce((acc,cur) => {
    if (cur.name.startsWith('playerName')) {
      acc.push({[cur.name]:cur.value})
    }
    else acc[acc.length-1][cur.name] = cur.value
    return acc;
  },[])
}

$(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  id="statType" name="statType[]"><option id="1">Points</option><option id="2">Rebounds</option><option id="3">Assists</option></select><select  id="overUnder" name ="overUnder[]"><option id="over">Over</option><option id="under">Under</option></select><input type="number" id="amount"  name="statAmount[]" required=""/><a href="javascript:void(0);"  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 vals = $(form).serializeArray(); // Encodes the set of form elements as an 
  return vals.reduce((acc,cur) => {
    if (cur.name.startsWith('playerName')) {
      acc.push({[cur.name]:cur.value})
    }
    else acc[acc.length-1][cur.name] = cur.value
    return acc;
  },[])
}

$("#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 >
    <div id="legs[]">
      <input type="text" id="name" name="playerName[]" placeholder="Enter player name" required="" />
      <select  id="statType" name="statType[]">
        <option id="1">Points</option>
        <option id="2">Rebounds</option>
        <option id="3">Assists</option>
      </select>
      <select  id="overUnder" name="overUnder[]">
        <option id="over">Over</option>
        <option id="under">Under</option>
      </select>
      <input type="number" id="amount"  name="statAmount[]" required="" />
      <a href="javascript:void(0);"  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>