JSFiddle - React, Tailwind, and code Playground

by tr_santi

JavaScript

$("#listForm").submit(function(ev) {
    ev.preventDefault();
    
    //Every time you use a jQuery selector like $("#listInput")
    //jQuery has to search the entire page for this item, which takes time and resources.
    
    //By storing the object as a variable once, we never have to look the object up again.
    
    var $listInput = $("#listInput");  
    var listInputValue = $listInput.val();
    var $checkboxContainer = $("#checkboxContainer");

    if (listInputValue == "") {
        alert("Please enter the item name, then click 'Add'.");
    } else {
        listCount++;

        $("<input />")
            .attr("id", "input" + listCount)
            .attr("type", "checkbox")
            .appendTo($checkboxContainer);

        $("<label />")
            .attr("id", "label" + listCount)
            .attr("for", "input" + listCount)
            .html(input)
            .appendTo($checkboxContainer);

        //Store the list count
        localStorage.setItem("listCount", listCount);

        //Store the list title
        localStorage.setItem("input" + listCount, input); //"Note " + noteCount + ": " + 

        this.submit();
    }
});