JSFiddle - React, Tailwind, and code Playground

by Ozren Tkalčec Krznarić

HTML

<ul id="textList">
</ul>

<textarea id="customText"></textarea>

<a href="#" id="addText">Add</a>

JavaScript

var currentIdx = $('ul#textList li').size();

$('a#addText').click(function(event) { 
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();

    //count how many items are in the ul textList
    var nextNumber = currentIdx++;

    if($('ul#textList li').size() <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        var newLi = $('<li class="textItem' + nextNumber + '">' + 
            $('#customText').val() +
            '<a class="deleteTextItem" href="#">Delete</a></li>');

        newLi.find('a.deleteTextItem').click(function() {
            $(this).parent('li').remove();
        })

        //Append a UL Item to the textList
        $('ul#textList').append(newLi);

        $('#customText').val('');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    } else {
        alert('you can have a maximum of 6 textual inputs!');   
    }
});