JSFiddle - React, Tailwind, and code Playground

by yinyann

HTML

<div id="container"></div>
<input type="text" id="saisie" />
<input type="button" id="ajouter" value="+" />

JavaScript

var List = {
    lists: [],
    addListItem: function(container, textInput){
        if(!List.lists[container]){
            List.lists[container] = $("<ul contenteditable />");
            container.append(List.lists[container]);
        }
        var listItem = $("<li />");
        listItem.text(textInput);
        List.lists[container].append(listItem);
    }
}

$(document).ready(function(){
    $("#ajouter").on("click", function(){
        List.addListItem($("#container"), $("#saisie").val());
    });
    $("#saisie").focus().on("keypress", function(event){
        if(event.keyCode == 13){
            List.addListItem($("#container"), $("#saisie").val());
            $("#saisie").val("");
            return false;
        }
    });
});