JSFiddle - React, Tailwind, and code Playground

by Jean-Baptiste Audras

HTML

<h1>Ajouter des items !</h1>
<a href="#">Go!</a>
<div>
    <p class="test">Test<br /><em>:-)</em></p>
</div>
<!-- 
Mis de côté : c'est pour récupèrer ensuite les données du formulaire (source = http://blog.arnaud-k.fr/2010/03/03/astuce-jquery-du-jour-la-fonction-clone/)
- - - -
if( !empty( $_POST['categorie'] ) )
{
     foreach( $_POST['categorie'] as $categorie )
     {
          echo $categorie . '
';
          // faire ici le traitement voulu, le foreach va parcourir toutes les catégories du tableau
     }
}
-->

CSS

h1 {
    margin: 0;
    padding: 10px;
    text-align: center;
    font-family: Helvetica;
    font-size: 12px;
}
div {
    margin: 40px auto;
    width: 400px;
    background: #fee;
    border: 1px;
    padding: 20px;
    overflow: hidden;
}
em {
    color: red;
}
p.test {
    padding: 20px 0;
    margin: 0 5px 5px 0;
    width: 50px;
    text-align: center;
    background: #ffe;
    border: 1px solid #ccc;
    float: left;
}

JavaScript

$("a").click(function() {
    var n = $("p.test").size();
    $("h1").text("Il y a maintenant " + n + " item(s)");
    if (n < 7) {
        $("p.test:last").clone(true).insertAfter("p.test:last");
    } else {
        alert('Vous ne pouvez plus en mettre');
    }
});