JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <form action="/" method="post">
    <button id="create-subtitle" class="btn btn-success">Create a subtitle</button>
    <table id="Subtitles">
    <tbody/>
    <tr>
    <td>
    <input class="text-box single-line" id="Subtitles_0__Name" name="Subtitles[0].Name" type="text" value="test123"/>
    </td>
    <td>
    <button id="create-ingredient0" name="create-ingredient0" class="btn btn-success">Add an ingredient</button>
    </td>
    </tr>
    </table>
    </form>
    </body>
</html>

JavaScript

$("#create-subtitle").click(function() {
    alert('subtitle clicked');
    var $parent = $("#Subtitles");
    var numElem = $parent.find("tr").length;
    $('#Subtitles > tbody:last').after('<tr><td><input class="text-box single-line" id="Subtitles_' + numElem + '__Name" name="Subtitles[' + numElem + '].Name" type="text" value="123" /></td><td><button id="create-ingredient' + numElem + '" name="create-ingredient' + numElem + '" class="btn btn-success">Ajouter un ingrédient</button></td></tr>');
    return false;
});

$(document).on('click', "[name^='create-ingredient']", function() { 
    alert('ingredient clicked');
    return false;
});