JSFiddle - React, Tailwind, and code Playground

by fallenreaper

CSS

a:hover{
    cursor:pointer;
}
a.add, a.remove {
    display:block;
    float:right;
    width:20px;
    height:20px;
    border: solid 1px black;
    background-color:lightgrey;
    text-align:center;
    border-radius:5px;
}
a.add:hover, a.remove:hover {
    background-color:grey;
    color: white;
}
table#list_items_table {
    padding: 5px;
    width:100%;
}
input.text{width:100%;}
a.save, a.cancel {
    width: 100%;
    display:block;
    text-align:center;
    background-color: lightgrey;
    border-radius: 5px;
    margin-left: 3px;
    margin-right: 3px;
}
div.wrapper{
    background-color:teal;
    width:400px;
    border-radius:10px;
    padding:10px;
}
/*td{
    border: solid 1px black;
}*/

JavaScript

$(function () {
    var sample = ["foo", "bar", "derp", "test", "test 2"];

    var $wrapper = $("<div class='wrapper'/>"),
        $table = $("<table id='list_items_table'/>"),
        $tr = $("<tr />"),
        $td = $("<td />"),
        $text = $("<input type='text' class='text'/>"),
        $add = $("<a class='add' />"),
        $remove = $("<a class='remove' />"),
        $save = $("<a class='save' />"),
        $cancel = $("<a class='cancel' />");

    $add.text("+");
    $remove.text("-");
    $save.text("Save");
    $cancel.text("Cancel");

    for (var i in sample) {
        $table.append($tr.clone().append($td.clone().append($text.clone().val(sample[i]))).append($td.clone().append($remove.clone())));
    }

    $table.find("tr:last").append($td.clone().append($add.clone()));

    $("body").on("click", "a.remove", function () {
        if ($(this).closest("tr").find("a.add").length > 0) {
            $(this).closest("tr").prev().append($(this).closest("td").next());
        }
        $(this).closest("tr").remove();
    });
    $("body").on("click", "a.add", function () {
        //alert("hit");
        $(this).closest("tr").clone(true).appendTo($(this).closest("table"));
        $(this).closest("table").find("tr:last > td input.text").val("");
        $(this).closest("td").remove();
        //$(this).closest("table").append($(this).closest("tr").clone(true));
    });
    $("body").on("click", "a.save", function(){
        
    });
    $("body").on("click", "a.cancel", function(){
        
    });

    $wrapper.append($table).append($("<table />").css("width","100%").append($tr.clone()
        .append($td.clone().append($save))
        .append($td.clone().append($cancel))));

    $("body").append($wrapper);

    });