JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<form id="form">
  <fieldset data-set="1">
     <input type="text" name="fname_1" placeholder="First Name" /><br/>
     <input type="text" name="mname_1" placeholder="Middle Name" /><br/>
     <input type="text" name="lname_1" placeholder="Last Name" />
  </fieldset>
  <button type="button" class="add">Add Fieldset</button>
  <button type="submit">Submit</button>
</form>

JavaScript

// our form as const object
const form = $('#form');

// on form submit pass event
$(form).on('submit', function(e) {

  // stop event default behaviour
  e.preventDefault();

  // set entry as serialized array
  let entry_arr_obj = $(this).serializeArray();

  // set empty object for formatted entry data
  let formatted_entry_obj = {};

  // for each entry array obj values as key => object
  $.each(entry_arr_obj, function(k, obj) {
  
    // split object field name by underscore to create name_fieldset array containing fieldset id and name key
    let name_fieldset = obj.name.split('_');
  
    // set the set id from name_fieldset array
    let fieldset = parseInt(name_fieldset[1]);
    
    // set name key from name_fieldset array
    let name = name_fieldset[0];
    
    // if formatted_entry_obj does not have own property matching current fieldset id
    if(!formatted_entry_obj.hasOwnProperty(fieldset)) {
  
      // add fieldset id and empty object to formatted_entry_obj
      formatted_entry_obj[fieldset] = {};
  
    }
  
    // add field name and field value to formatted_entry_obj current fieldset object
    formatted_entry_obj[fieldset][name] = obj.value;
  
  });

  // log our entry object
  console.log(formatted_entry_obj);

});

// on form add field set
$(form).on('click', '.add', function(e) {

  // get all our fieldsets
	let fieldsets = $('fieldset',form);
  
  // last fieldset obj and id
  let last_fieldset = fieldsets[fieldsets.length-1];
  let last_fieldset_id = parseInt($(last_fieldset).data('set'));
  
  // create new fieldset id
  let new_fieldset_id = last_fieldset_id + 1;
  
  // clone last fieldset and filter attributes
  $(last_fieldset).clone().filter(function() {
  
    // update data set attribute with new fieldset id
    $(this).attr(
    	'data-set',
    	new_fieldset_id
      
    // now filter children elements  
    ).children().filter(function() {
    
        $(this).children().filter(function() {
    
          // get child...