Duplicate form & increment input ID's (Jquery)

by Arnaud

HTML

<form action="" method="post" id="" class="formProfil">

<div id="sections">
  <div class="section">
      <fieldset>
  <input type="text" class="formID" name="formID" data-origin="field" />
  <label class="checkbox-inline inputsNonAutres">
   <input type="radio" id="typeSituation-famille" value="typeSituation-famille" checked name="typeSituation4" /> Famille (ou assimilé) </label>
  <label class="checkbox-inline inputsNonAutres">
   <input type="radio" id="typeSituation-voisin" value="typeSituation-voisin" name="typeSituation4" /> Voisin </label>
  <label class="checkbox-inline inputsNonAutres">
   <input type="radio" id="typeSit ation-ami" value="typeSituation-ami" name="typeSituation4" /> Ami </label>
  <label class="checkbox-inline inputsNonAutres">
   <input type="radio" id="typeSituation-aideDomicile" value="typeSituation-aideDomicile" name="typeSituation4" /> Aide à domicile </label>
  <label class="checkbox-inline">
   <input type="radio" id="typeSituation-autre" value="typeSituation-autre" name="typeSituation4" /> autre </label>
  <label class="checkbox-inline">
   <input type="text" class="form-control round-form inputAutre" placeholder="Autres" style="width: 100%; !important; font-size:12px !important;" id="autresInput" /> </label>
  <br />
  <div class="boutFormSupprimer remove">X</div>
  <div class="ligneForm ligneFormProfil ">
   <label class="col-sm-2 col-sm-2 control-label" for="seniorNom" style="font-size:18px !important;">Nom </label>
   <input type="text" name="seniorNom" id="seniorNom" class="inputSideContenu inputProfil inputProfilSenior" value="Martine"   /> </div>
  <div class="ligneForm ligneFormProfil ">
   <label class="col-sm-2 col-sm-2 control-label" for="seniorPrenom" style="font-size:18px !important;">Prénom </label>
   <input type="text" name="seniorPrenom" id="seniorPrenom" class="inputSideContenu inputProfil inputProfilSenior" value="Martine"   /> </div>
  <div class="ligneForm ligneFormProfil ">
   <label class="col-sm-2 col-sm-2...

JavaScript

//define template
var template = $('#sections .section:first').clone();

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {

    //increment
    sectionsCount++;

    //loop through each input
    var section = template.clone().find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + sectionsCount;

        //update for label
        $(this).prev().attr('for', newId);

        //update id
        this.id = newId;

    }).end()

    //inject new section
    .appendTo('#sections');
    return false;
});

//remove section
$('#sections').on('click', '.remove', function() {
    //fade out section
    $(this).parent().fadeOut(300, function(){
        //remove parent element (main section)
        $(this).parent().parent().empty();
        return false;
    });
    return false;
});