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;
    float: left;
    margin: 2px;
}

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

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

.container {
    position: relative;
    width: 800px;
    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">delete!</button>').appendTo(redbox.find('.togglecontainer')),
        wegermee = $('<button class="togglebtn">Show more</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>').appendTo(redbox.find('.togglecontainer'));
    });

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


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

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

});