JSFiddle - React, Tailwind, and code Playground

by anacaona83

HTML

<h2><a href="#" id="addScnt">Ajouter un input</a></h2>

<div id="p_scents">
  <p>
    <TABLE BORDER="0">
      <CAPTION> Correspondance des habitats </CAPTION>
      <TR>
        <TH> Typologie </TH>
        <TH> Code habitat </TH>
      </TR>
      <TR>
        <TH>
          <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Valeur de l'input" /> </label>
        </TH>
        <TH>
          <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Valeur de l'input" /> </label>
        </TH>
      <!--   <TH> <a href="#" id="remScnt">Supprimer</a></TH>-->
      </TR>
    </TABLE>
  </p>

</div>

CSS

* {
  font-family: Arial;
}

h2 {
  padding: 0 0 5px 5px;
}

h2 a {
  color: #224f99;
}

a {
  color: #999;
  text-decoration: none;
}

a:hover {
  color: #802727;
}

p {
  padding: 0 0 5px 0;
}

//table {border:5px solid #999;}
input {
  padding: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -web-kit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

JavaScript

$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').on('click', function() {
    $('<p><TABLE BORDER="0"><TR><TH><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_typo_' + i + '" value="" placeholder="Valeur de l\'input" /></label></TH><TH><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_code_' + i + '" value="" placeholder="Valeur de l\'input" /></label><a href="#" id="remScnt">Supprimer</a></TH></p>').appendTo(scntDiv);
    i++;
    return false;
  });

  $('#remScnt').on('click', function() {
    if (i > 2) {
      $(this).parents('tr').remove();
      i--;
    }
    return false;
  });
});