Значения, заменяющие себя в массиве

Question

Я пытаюсь ввести sh входное значение в массив на основе полей ввода. Но проблема, с которой я здесь сталкиваюсь, заключается в том, что последнее поле ввода заменит все объекты в моем массиве следующим образом:

[
   {
      "label":"4",
      "type":"",
      "process":"",
      "name":"5",
      "col":"6"
   },
   {
      "label":"4",
      "type":"",
      "process":"",
      "name":"5",
      "col":"6"
   }
]

То, что я ожидаю, это значение каждого входа в каждом поле отдельно. Это означает, что вместо того, чтобы видеть объект выше, он должен быть меткой: 1, name: 2, col: 3 et c et c в правильном порядке. Я не уверен, что мне здесь не хватает, потому что мой код имеет для меня смысл. Что я делаю не так?

 $(document).ready(() => {
  $('.add-field').click(e => {
    e.preventDefault();

    generateField();
  });

  $('.form-maker').submit(e => {
    e.preventDefault();
    const temp = {},
      payload = [];

    $('.dynamic-group').each((i, group) => {
      $(group)
        .find('input, select')
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push(temp);
    });

    console.log(payload);
  });

  const generateField = () => {
    $('.dynamic-fields').append(
      `
    <div class="form-inline dynamic-group">
      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Label</div>
        </div>
        <input type="text" class="form-control" placeholder="Input Label" name="label">
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Type</div>
        </div>
        <select name="type" name="type">
          <option value="">Something in here</option>
        </select>
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Process</div>
        </div>
        <select name="process" name="process">
          <option value="">Something in here</option>
        </select>
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">Input Name</div>
        </div>
        <input type="text" class="form-control" placeholder="Input Name" name="name">
      </div>

      <div class="input-group mb-2 mr-sm-2">
        <div class="input-group-prepend">
          <div class="input-group-text">DB. Col Name</div>
        </div>
        <input type="text" class="form-control" placeholder="DB. Col Name" name="col">
      </div>
    </div>
    
    <hr />
    
    `
    );
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>

<button class="add-field">
    Add Field
</button>

<button type="submit">
    Make Form
</button>

Answer 1

Переменная temp должна быть помещена во внутреннюю l oop каждой группы:

$(document).ready(() => {
  $(".add-field").click(e => {
    e.preventDefault();

    generateField();
  });

  $(".form-maker").click(e => {
    e.preventDefault();
    
    const payload = [];

    $(".dynamic-group").each((i, group) => {
    
      const temp = {};

      $(group)
        .find("input, select")
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push(temp);
    });

    console.log(payload);
  });

  const generateField = () => {
    $(".dynamic-fields").append(
      `
			<div class="form-inline dynamic-group">
				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Label</div>
					</div>
					<input type="text" class="form-control" placeholder="Input Label" name="label">
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Type</div>
					</div>
					<select name="type" name="type">
						<option value="">Something in here</option>
					</select>
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Process</div>
					</div>
					<select name="process" name="process">
						<option value="">Something in here</option>
					</select>
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">Input Name</div>
					</div>
					<input type="text" class="form-control" placeholder="Input Name" name="name">
				</div>

				<div class="input-group mb-2 mr-sm-2">
					<div class="input-group-prepend">
						<div class="input-group-text">DB. Col Name</div>
					</div>
					<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
				</div>
			</div>
			
			<hr />
			
			`
    );
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>

<button class="add-field">
    Add Field
</button>

<button class="form-maker" type="submit">
    Make Form
</button>

Answer 2

Это потому, что вы ссылаетесь на один и тот же объект каждый раз, поэтому последнее, что получит обновление, выиграет. Вы хотите, чтобы копия объекта помещалась в массив:

$('.dynamic-group').each((i, group) => {
      $(group)
        .find('input, select')
        .each((ii, field) => {
          temp[field.name] = field.value;
        });

      payload.push($.extend(true,{},temp));
    });

Существует несколько способов сделать копии объекта - в этом случае я использую метод расширения JQuery, чтобы сделать точная копия объекта, https://api.jquery.com/jquery.extend/

$.extend(true,{},temp)