JSFiddle - React, Tailwind, and code Playground

by Anurag Udasi

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<ul id = 'grocery_list' class = "grocery_items_class">
    <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<input class = "input_text_box_class" type="text"></input>

<button id = 'add_grocery_item'> Add </button>

CSS

.grocery_items_class
{
    font-family: 'Segoe UI';    
}

.input_text_box_class
{
    border: 2px solid;
}

.remove_item_class
{
    font-family: "Segoe UI";
    font-size: "larger";
    cursor: "pointer";
    font-weight: "bolder";
}

JavaScript

$("#add_grocery_item").bind("click", function()
                            {
                                var current_list = $("ul");
                                var new_item_name = $(".input_text_box_class").val();                                        var new_item = "<li>" + new_item_name +  "</li>"; 
                                current_list.append(new_item);
                              $(".input_text_box_class").val("");  
                            });