JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <ul id="container">
        
    </ul>
    <div id="input">
        <textarea cols="15" rows="10"></textarea>
        <br/>
        <button type="button" id="add">Add</button>
    </div>
</div>

CSS

* {
    margin: 0px;
}

#box{
    margin-top: 20px;
}
#box ul, div {
    display: inline;
    /*dont remove this else the new boxes added will make the next one to go down once and then bounce back to the right*/
}
#container {
    float: left;
    width: 30px;
    /*because width of 2 textboxes is 143+143=286+24*/
    border: 2px red solid;
    min-height: 300px;
    list-style-type: none;
    padding-left: 20px
    /*to prevent horizontal indent of <li>*/
}
#container li {
    width: 143px;
    display: inline-block; /* don't remove this also */
    margin: 2px;
   
}

#container>li>textarea {
    margin-top: 0px;
}
#input {
    margin-left: 5px;
    width: 143px
}
textarea {
    resize: none
}

JavaScript

$('#add').click(function () {

    var val = $('#input textarea').val();

    $('#input textarea').val("");

    if (val.length > 0) {

        var newbox = $('<li id="newbox"><div>Remove</div><textarea cols="15" rows="10"></textarea></li>');

        newbox.children('textarea').val(val);
        
        newbox.children('div').css({
            width: '143px',
            background: 'darkred',
            fontSize: '12px',
            color: 'white',
            textAlign: 'center',
            cursor:'pointer'
        })

        $('#container').prepend(newbox);
        
        $('#newbox').children('*').css('display','block')
        
  /**********************************************************/     
 /****for Removing text boxes in the container****************/
 /**********************************************************/       
        $('#newbox div').on('click',function(e)
               {
                   var elem=$(this);
                   if($(this).text()=="Remove")
                    {
					
					if(($(this).parent('li').parent().children('li').index($(this).parent('li'))+1) %2 !=0 && !$(this).parent().is(':last-child'))
					{
					   elem.parent().next().toggle('slide','slow',function(){
					   elem.parent('li').hide();
					   elem.parent('li').next().show();
					   elem.parent('li').remove();
					   alotId();
					   })
                    }
					
					else if(($(this).parent('li').parent().children('li').index($(this).parent('li'))+1)%2==0 && !$(this).parent().is(':last-child'))
					{
					   //
					   
					   elem.parent('li').css({
					   'position': 'absolute',
					   'z-index':'1000',
					   });
					   //elem.parent().next().toggle('slide');
					   elem.parent().toggle('slide','slow',function(){
					  
						elem.parent('li').next().show('slide',{direction: 'right'})
					   elem.parent('li').remove();
					   
					   
					   
					    alotId();
					   })
					}

					else...