JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="test-container"></div>

CSS

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

JavaScript

var otherTravellers = [];
createOtherPassengersDataCollectionFields();
function createOtherPassengersDataCollectionFields()
{
	otherTravellers = []; //reset the otherTravellers array, so it doesn't hold previous values
		
	var adults   = 3; 
	var children = 2;
	var infants  = 1;
		
	var adultDataFields    = '';
	var childrenDataFields = '';
	var infantDataFields   = '';
		
	var container = document.getElementById('test-container');
	container.innerHTML = '';
		
	//lead passenger is Adult 1, so start from 2 
	for( var i = 2; i <= adults; i++)
	{ 
		 
        var currAdultDataField = ''   +
			'<div class="field">Adult '  + i + ': ' + 
             '<div style="width:600px">' + 
              '<select id="adult-'       + i + '-title" style="border:solid 1px #cccccc;">' + 
               '<option selected>--Title--</option>' +
			   '<?php echo getTitlesDropdown(); ?>'  +   
              '</select>&nbsp;' +
              '<input type="text" id="adult-' + i + '-surname" placeholder="Surname" style="width:110px; border:solid 1px #cccccc;">&nbsp;' +
              '<input type="text" id="adult-' + i + '-othernames" placeholder="Othernames"  style="width:120px; border:solid 1px #cccccc;">&nbsp;' + 
              '<input class="bday" type="text" id="adult-' + i + '-birthdate"  placeholder="Date of Birth"  style="width:120px; border:solid 1px #cccccc;" readonly>&nbsp;' + 
             '</div>' +
            '</div>';
			
		container.innerHTML += currAdultDataField;
		otherTravellers.push({'type':'adult', 'trackerID':'adult-' + i});
	}
		
	for( var i = 1; i <= children; i++)
	{ 
        var currChildDataField = ''  +
			'<div class="field">Child '  + i + ': ' + 
             '<div style="width:600px">' + 
              '<select id="child-'       + i + '-title" style="border:solid 1px #cccccc;">' + 
               '<option selected>--Title--</option>'    +
			   '<option value="master">Master</option>' + 
               '<option value="miss">Miss</option>'     +   
        ...