JSFiddle - React, Tailwind, and code Playground

by opoe

HTML

<button id="creaters">Add a box</button>
<div class="container"></div>

CSS

.redbox {
    position: relative;
    display: block;
    width: 200px;
    height: auto;
    background: red;
}

.togglecontainer
{
    
    width: 200px;
    height: auto;   
}

.handler {
    width: 200px;
    height: 23px;
    background: yellow;
}  

.container {
    position: relative;
    width: 700px;
    height: 700px;
    background: blue;
}

.complete { text-decoration: line-through; color: grey;
}

JavaScript

var counter = 0;

$('#creaters').click(function() {
    var redbox = $('<div class="redbox"><div class="handler"></div><div class="togglecontainer"></div></div>').appendTo('.container'),
        appendbtn = $('<button class="appendbtn">append!</button>').appendTo(redbox.find('.togglecontainer')),
        deletelistbtn = $('<button class="deletelistbtn">deletelist</button>').appendTo(redbox.find('.togglecontainer')),
        togglebtn = $('<button class="togglebtn">Show less</button>').appendTo(redbox.find('.handler'));

    redbox.draggable({
        handle: '.handler'
    });

    appendbtn.click(function() {
        var elems = $('<div>' + '<input type="checkbox" id="checkbox' + (counter) + '" class="item"/>' + '<input value="some value"  type="text" class="inputfield' + (counter) + '"/>' + '<input type="button" class="removebtn" value="." id="removebtn"' + (counter) + '"/>' + '</div>').insertBefore(redbox.find('.togglecontainer'));
    });

    $('.removebtn').live('click', function() {
        $(this).parent().remove();
    });

    $('.deletelistbtn').live('click', function() {
        $(redbox).remove();
    });


    $(redbox).delegate("input[type=checkbox]", "change", function() {
        $(this).next().toggleClass("complete");
    });

    togglebtn.click(function() {
        var that = this;
        $('.togglecontainer', redbox).toggle(10, function() {
            var txt = $(that).html();
            $(that).html((txt == 'Show less') ? 'Show more' : 'Show less');
        });
    });
    togglebtn.trigger("click");

});