JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<form>
  <fieldset class="itinerary">
    <label>Country</label><input name="country">    
    <label>Day</label><input name="day">    
  </fieldset>
  
  <fieldset class="passengers">
    <label>First Name</label><input name="firstName">    
    <label>Middle Name</label><input name="middleName">
    <label>Surname</label><input name="surname">
  </fieldset>
  <button id="add" type="button">Add Another Passenger</button>
  <button id="submit" type="button"> Submit Form </button>
</form>

JavaScript

var form = $('form');
var fieldset = form.find('.passengers');
var add = $('#add');
var submit = $('#submit');

add.on('click', function() {
	var clone = fieldset.clone();
  clone.insertAfter(fieldset);
});

submit.on('click', function() {
	var data = [];
	form.find('fieldset.passengers').each(function(i, fields) {
  	data.push($(fields).serializeArray());
  });
  
  var ajaxData = {
    itinerary: $('.itinerary').serialize(),
    passengers: data
  };
  
  console.log(ajaxData);
});