JSFiddle - React, Tailwind, and code Playground

by Dave Mednick

HTML

<a href="#" class="create">Create a paragraph</a>

<ul class="p-wrap"></ul>

CSS

li {
    display: inline-block;
    width: 100%;
}
.num-cont, .para-cont, .action-cont {
    float: left;
}
.num-cont {
    padding: 5px 10px;
    background-color: #D7FFFF;
    margin-right: 50px;
}
.para-cont {
    margin: 5px 50px 0px 0px;
}
.action-cont {
    margin-top: 5px;
}
.add-para, .del-para {
    margin-right: 30px;
    text-decoration: none;
    background-color: #FFDFDF;
    font-size: 18px;
    padding: 5px 10px;
}

JavaScript

var _pId = 1;
var ul = $('.p-wrap');
var li = $('<li></li>').attr({
    'id': 'p_cont_' + _pId
});
var num = $('<span></span>').attr({
    'id': 'num_cont_' + _pId
}).text(_pId).addClass('num-cont');
var para = $('<div></div>').attr({
    'id': 'para_cont_' + _pId
}).text('Paragraph goes here...').addClass('para-cont');
var actionContainer = $('<div></div>').addClass('action-cont');
var addPara = $('<a href="#"></a>').attr({
    'id': 'add_para_' + _pId
}).text('+').addClass('add-para');
var delPara = $('<a href="#"></a>').attr({
    'id': 'del_para_' + _pId
}).text('x').addClass('del-para');

$('a.create').on('click', function () {
    actionContainer.append(addPara, delPara);
    li.append(num, para, actionContainer);
    ul.append(li);
    $(this).hide();
    _pId++;
});

$('ul.p-wrap').on('click', '.add-para, .del-para', function (event) {

    //we select the box clone it and insert it after the box

    if ($(this).hasClass('add-para')) {

        var arr = [];
        var clone = $(li).clone().attr({
            "id": "p_cont_" + _pId
        }).insertAfter($(this).parent().parent());

        clone.find('span').attr({
            "id": "num_cont_" + _pId
        }).text(_pId);

        $('ul.p-wrap li span').each(function () {
            arr.push(parseInt($(this).text(), 10));
        });
        arr.sort(numOrdDesc);
        $('ul.p-wrap li span').each(function () {
            $(this).text(arr.pop());
        });



        _pId++;
    } else {
        $(this).parent().parent().remove();
        $('ul.p-wrap li').each(function (i, e) {
            $(this).attr('id', 'p_cont_' + (i+1));
            $(this).find('.num-cont').attr('id', 'para_cont_' + (i+1));
            $(this).find('.num-cont').text((i+1));
        });
    }
});

function numOrdDesc(a, b) {
    return (b - a);
}