Ajouter des éléments au clic

Bonjour à tous,

Je suis débutant et dans mon projet le client doit remplir un formulaire de recette de cuisine.
Je bloque au moment du remplissage des ingrédients que j'aimerai coder en jQuery.

J'ai passé une journée la dessus a essayer plein d'astuces diverses mais je n'arrive a rien faire marcher.
Voici ce que je n'arrive pas a coder: Le client en cliquant sur le bouton "ajouter" doit faire apparaitre une nouvelle ligne avec les deux input (Nom de l’ingrédient et quantité) + 1 select (L'unité de mesure)

Code:

1
2
3
4
5
6
7
8
9
Ajoutez vos ingredients: <br />
        <table class="table" id="ingredientTbl">
            <tr>
                <th>Ingrédient</th>
                <th>Quantité</th>
                <th>Unité</th>
            </tr>
        </table>
        <button id="btnAdd">Ajouter</button>

Coté JS:

Code:

1
2
3
4
5
$("#btnAdd").click(function () {
            var newElement = '<tr><td><input type="text" name="Ingrédient[]" pattern=".{3,}" required title="Ingrédient requis" /></td><td><input type="number" name="Quantité[]" min="1" /></td><td><select name="Unité" id="unityMenu" style="width:100px">< option value = "" disabled selected> Choose Unity</option ></select ></td></tr>';
            $("#ingredientTbl").append($(newElement));
 
        });

Variante en UL LI:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <ul id="list">
            <li class="list_ingredient">
                Nom de l'ingrédient:
                <input type="text" id="ingredientName" pattern=".{3,}" required title="Ingrédient requis" />
                Mesure:
                <input type="number" id="measurement" min="1" />
                Unité:
                <select name="unitOfMeasure" id="unityMenu" style="width:100px">
                    <option value="" disabled selected>Choose Unity</option>
                </select>
                <button id="list_add">Ajouter</button>
                <button id="list_del">Supprimer</button>
            </li>
        </ul>

ps: si vous pensez qu'une méthode est mieux que celle ci dessus dites moi je suis flexible.

Merci d'avance.