JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="combinaison">
    <div id="alpha1">
        <span class="plus">+</span>
 <span class="nombre">A</span>
 <span class="moins">-</span>

    </div>
    <div id="nombre2"><span class="plus">+</span><span class="nombre">0</span><span class="moins">-</span>

    </div>
    <div id="nombre3"><span class="plus">+</span><span class="nombre">0</span><span class="moins">-</span>

    </div>
    <div id="nombre4"><span class="plus">+</span><span class="nombre">0</span><span class="moins">-</span>

    </div>
</div>

CSS

.nombre {
    display: inline-block;
    border:1px solid #000;
    background-color:#fff;
    padding:5px;
    width:25px;
    height:25px;
}
.plus, .moins {
    display: block;
    cursor:pointer;
}
#combinaison > div {
    display: inline-block;
    text-align:center;
}

JavaScript

$(".plus, .moins").on("click", function () {
    var suivant = "";
    var arr = [];
    var nb = $(this).parent().children(".nombre");
    if ($(this).parent().attr("id") == "alpha1") {
        arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    } else {
        arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
    }
    var index = arr.indexOf(nb.text());
    if ($(this).attr("class") == "plus") {
        if (index >= arr.length - 1) {
            index = -1;
        }
        suivant = arr[index + 1];
    } else {
        if (index <= 0) {
            index = arr.length;
        }
        suivant = arr[index - 1];
    }
    nb.text(suivant);
    //$("#combinaison")[0].childNodes.each(".nombre", function(){})
    var code = "";
    $('#combinaison span.nombre').each(function(){
        code += $(this).text();
    });
    console.log(code)
});