JSFiddle - React, Tailwind, and code Playground
HTML
<h2>Sélectionner une date de concert</h2>
<input type="checkbox" id="1" name="date[]" value="Samedi 14 Décembre 2013, 20h" />Samedi 14 Décembre 2013, 20h - Temple de Morges<br /><br />
<div class="hidden 1">
<div id="phone_number_form" class="hidden">
<p>
<select name="sele-personne">
<option>
Cat 1 - Adulte
</option>
<option>
Cat 2 - Adulte
</option>
<option>
Cat 3 - Adulte
</option>
<option>
Cat 1 - Etudiant
</option>
<option>
Cat 2 - Etudiant
</option>
<option>
Cat 3 - Etudiant
</option>
<option>
Cat 1 - Enfant
</option>
<option>
Cat 2 - Enfant
</option>
<option>
Cat 3 - Enfant
</option>
</select>
<input type="number" style="width:35px;" id="quantitee" value="1" min="1" max="50"/>
<input type="texte" readonly value="" />
<input type="button" id="remove_phone_number" value="Supprimer">
</p>
</div>
<form>
<p>
<input type="button" value="Ajouter une personne" id="add_phone_number">
</p>
</form>
</div>
<input type="checkbox" id="2" name="date[]" value="Samedi 15 Décembre 2013, 20h" />Samedi 15 Décembre 2013, 20h - Temple de Morges<br /><br />
<div class="hidden 2">
<div id="phone_number_form" class="hidden">
<p>
<select name="sele-personne">
<option>
Cat 1 - Adulte
</option>
<option>
Cat 2 - Adulte
</option>
<option>
Cat 3 - Adulte
</option>
<option>
Cat 1 - Etudiant
</option>
<option>
...
CSS
.hidden {
display: none;
}
JavaScript
$(document).ready(function(){
var phone_number_form_index=0;
$("#add_phone_number").click(function(){
phone_number_form_index++;
$(this).parent().before($("#phone_number_form").clone().attr("id","phone_number_form" + phone_number_form_index));
$("#phone_number_form" + phone_number_form_index).css("display","inline");
$("#phone_number_form" + phone_number_form_index + " :input").each(function(){
$(this).attr("name",$(this).attr("name") + phone_number_form_index);
$(this).attr("id",$(this).attr("id") + phone_number_form_index);
});
$("#remove_phone_number" + phone_number_form_index).click(function(){
$(this).closest("div").remove();
});
});
$('.hidden').hide();
$(':checkbox').change(function() {
changeCheck(this);
});
$(':checkbox:checked').each(function(){
changeCheck(this);
});
function changeCheck(x) {
var option = $(x).attr('id');
if ($('.' + option).is(':visible')) {
$('.' + option).fadeOut();
}
else {
$('.' + option).fadeIn();
}
}
});