JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
        ID 
        <input type="text" id="txt1" /><br />

        Name 
        <input type="text" id="txt2" /><br />

        Country: 
        <select id="mycountry">
            <option>---select---</option>
            <option>Egypt</option>
            <option>qatar</option>
            <option>saudia</option>
            <option>emarates</option>
        </select><br />
        <input type="button" value="add" id="btn" />
        <input type="button" value="display" id="btndis" />

        <table>
            <thead>
                <tr>
                    <td>
                        ID
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Country
                    </td>
                    <td>
                </tr>
            </thead>
            <tbody id="tb"></tbody>
        </table>
        <ul>
        </ul>
    </div>

JavaScript

$(function () {
						$('#btndis').click(function(){
            $('ul').empty();
            	$("#tb").find('tr').each(function(i,el){
                	var $tds = $(this).find('td');
                  //for name
                 $('ul').append("<li>"+$tds.eq(1).text()+"</li>");
                });	
            });
            $("#btn").click(function() {
                var x = $("#txt1").val();
                var y = $("#txt2").val();
                var z = $("#mycountry").val();
                $("#tb").append("<tr> <td>" + x + "</td> <td>" + y + "</td> <td>" + z + "</td><td> <input type='button'class='c' value='Delete'/></td><td> <input type='button' class='d' value='Edit'/></td></tr>");
            });

            $("#tb").on("click", ".c", function () {
                //$(this).parent().parent().remove();
                $(this).closest('tr').remove();
            });

            $("#tb").on("click", ".d", function () {
               var row = $(this).closest('tr').toggleClass("editing");
               row.find("td").slice(0, 3).prop("contenteditable", row.hasClass("editing"));
           });
        });