create an array of objects from form

(() => {
  let currentCount = 0
  const submitButton = document.querySelector('#submitForm')
  // reducer for inputs within div.set
  const inputs2ObjectReducer = (acc, inp) => ( { ...acc, [inp.className]: inp.value } );
    
  document.querySelector('#addMoreFields').addEventListener('click', (event) => {
    event.preventDefault();

    // find and clone the template content
    const theForm = document.querySelector('#theForm');
    const template = theForm.getElementsByTagName('template')[0];
    const clone = template.content.cloneNode(true);

    // if the submitButton is hidden, show it
    if (submitButton.offsetParent === null) {
      submitButton.removeAttribute('style');
    }

    // add class to set and name on input fields
    clone.querySelector('.set').classList.add(`set-${currentCount}`);
    clone.querySelector('.first_name').setAttribute('name', `firstName[${currentCount}]`);
    clone.querySelector('.middle_name').setAttribute('name', `middleName[${currentCount}]`);
    clone.querySelector('.last_name').setAttribute('name', `lastName[${currentCount}]`);
    theForm.append(clone);

    currentCount++;
  })

  submitButton.addEventListener('click', (event) => {
    event.preventDefault();
    
    // Reduce all div.set to array of objects
    const theArray = [...document.querySelectorAll(".set")]
      .reduce( (acc, val) =>
        [...acc, 
        [...val.querySelectorAll("input")]
          .reduce(inputs2ObjectReducer, {})], [] );
        
    console.log(theArray);
  })
})()

.set {
  margin: 5px;
  padding: 5px;
  outline: 1px solid #ccc;
}

<form id="theForm">
  <template>
    <div class="set">
      <input class="first_name" placeholder="first name" />
      <input class="middle_name" placeholder="middle name" />
      <input class="last_name" placeholder="last name" />
    </div>
  </template>
  <button id="addMoreFields">add</button>
  <button id="submitForm" style="display: none;">submit</button>
</form>