JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="mainForm" action="">
<div class="contact-form bottom">
<div id="lstPersons" name="lstPersons">
<div class="row person" id="person0" name="person">
<div class="col-md-3 col-sm-12">
<select class="form-control" id="cat0" name="cat">
<option value="A" selected>Adulte</option>
<option value="E">Enfant</option>
<option value="B">Bébé</option>
</select>
</div>
<div class="col-md-3 col-sm-12">
<input type="text" id="prenom0" class="form-control firstname" required placeholder="Prénom" name="prenom" value="AAA" />
</div>
<div class="col-md-3 col-sm-12">
<input type="text" id="nom0" class="form-control lastname" required placeholder="Nom" name="nom" value="AAA" />
</div>
<div class="col-md-2 col-sm-12">
<input type="text" name="allergies" class="form-control allergies" placeholder="Allergies..." id="allergies0"/>
</div>
<div class="col-md-1 col-sm-12">
</div>
</div>
<div class="row person" id="person1" name="person">
<div class="col-md-3 col-sm-12">
<select class="form-control" id="cat1" name="cat">
<option value="A" selected>Adulte</option>
<option value="E">Enfant</option>
<option value="B">Bébé</option>
</select>
</div>
<div class="col-md-3 col-sm-12">
<input type="text" id="prenom1" class="form-control firstname" required placeholder="Prénom" name="prenom" value="BBB" />
</div>
<div class="col-md-3...
JavaScript
function confirm_avail()
{
console.log($('#mainForm').serializeArray());
}
/*Click on button to confirm*/
$('#btn-confirm').click(function() {
confirm_avail();
});