JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div class="ingredient_add" id="test">test</div>
<ul id="ingredientsAdded"></ul>

CSS

ul {
    background-color: blue;
    width: 200px;
    height: 100%;
    min-height: 200px;
}
li {
    width 100px;
    height: 20px;
    background-color: yellow;
}

JavaScript

$(document).ready(function () {
    var counter = 0;
    $('.ingredient_add').click(function (event) {
        event.preventDefault();
        var id = this.id;
        var value = $(this).text();
        $('#ingredientsAdded').append('<li id="' + id + counter + '">' + value + '</li>');
        counter += 1;
    }); //end add to list

}); // end document ready()