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>

JavaScript

$(function () {
    var nameSubtitle = $("#name-subtitle"),
        allFieldsSubtitle = $([]).add(nameSubtitle),
        tips = $(".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" id="Subtitles_' + numElem + '__Name" name="Subtitles[' + numElem + '].Name" type="text" value="' + nameSubtitle.val() + '" /></td><td>&nbsp;<ul id="ListIngredient' + numElem + '"></ul></td><td><button id="create-ingredient' + numElem + '" name="create-ingredient' + numElem + '" class="btn btn-success">Ajouter un ingrédient</button></td></tr>');
                    $(this).dialog("close");
                }
           ...