JSFiddle - React, Tailwind, and code Playground

by DarkJaff

HTML

<div class="alert alert-info">Pour ajouter des ingrédients, vous devez créer au moins une catégorie. Ex: Sauce, garniture, Viande, etc...
    <br />Vous pouvez créer autant de catégorie que vous voulez afin de garder votre recette facile à suivre</div>
<table id="Subtitles">
    <tbody></tbody>
</table>
<button id="create-subtitle" class="btn btn-success">Créer une catégorie d'ingrédients</button>
<div class="alert alert-info">Pour ajouter des étapes, vous devez créer au moins un sous-titre. Ex: Préparation, cuisson, etc...</div>
<table id="StepTitles">
    <tbody></tbody>
</table>
<button id="create-steptitle" class="btn btn-success">Ajouter un sous-titre pour vos étapes</button>
<div id="dialog-form-subtitles" title="Ajouter une catégorie d'ingrédient">
    <form>
        <fieldset>
            <label for="name">Nom de la catégorie</label>
            <input type="text" name="name-subtitle" id="name-subtitle" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<div id="dialog-form-ingredients" title="Ajouter un ingrédient">
    <form>
        <fieldset>
            <label for="name">Ingrédient</label>
            <input type="text" name="name-ingredient" id="name-ingredient" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<div id="dialog-form-steptitles" title="Ajouter un sous-titre pour les étapes">
    <form>
        <fieldset>
            <label for="name">Nom du sous-titre</label>
            <input type="text" name="name-steptitle" id="name-steptitle" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<div id="dialog-form-steps" title="Ajouter une étape">
    <form>
        <fieldset>
            <label for="name">Description</label>
            <input type="text" name="name-step" id="name-step" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>

JavaScript

$(function () {
    var nameSubtitle = $("#name-subtitle"),
        allFieldsSubtitle = $([]).add(nameSubtitle),
        tips = $(".validateTips");

    var nameIngredient = $("#name-ingredient"),
        allFieldsIngredient = $([]).add(nameIngredient),
        tipsIngredient = $(".validateTips");

    var nameStepTitle = $("#name-steptitle"),
        allFieldsStepTitle = $([]).add(nameStepTitle),
        tipsStepTitle = $(".validateTips");

    var nameStep = $("#name-step"),
        allFieldsStep = $([]).add(nameStep),
        tipsStep = $(".validateTips");

    function updateTips(t) {
        tips.text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("La longueur du champ " + n + " doit être entre " + min + " et " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }

    $("#dialog-form-subtitles").dialog({
        autoOpen: false,
        height: 220,
        width: 450,
        modal: true,
        buttons: {
            "Ajouter une catégorie d'ingrédient": function () {
                var bValid = true;
                allFieldsSubtitle.removeClass("ui-state-error");

                bValid = bValid && checkLength(nameSubtitle, "catégorie d'ingrédient", 3, 50);

                if (bValid) {
                    var $parent = $("#Subtitles");
                    var numElem = $parent.find("tr").length;
                    $('#Subtitles > tbody:last').append('<tr><td><input class="text-box single-line"...