JSFiddle - React, Tailwind, and code Playground

HTML

</ul>                <div class="new thoughts">
    <h1>New Thoughts</h1>

    <p>What's on your mind?</p>

    <div class="row">
        <div class="col-lg-5">
<form id="new-thoughts" action="/CMT/frontend/web/index.php?r=thoughts%2Fnew-entry" method="post" enctype="multipart/form-data">

<div class="form-group field-thoughtslist-title required">
<label class="control-label" for="thoughtslist-title">Title</label>
<input type="text" id="thoughtslist-title" class="form-control" name="ThoughtsList[title]">

<div class="help-block"></div>
</div>
          <button type='button' id='button-add-another' class='btn btn-primary'> New Thought </button>
                <br>
                <br>
                <button type="submit" class="btn btn-primary" name="submit-button">Submit</button>        </div>
            </form>    </div>
</div>

                </div>
    </div>

JavaScript

var entMax = 10; //maximum number of entries
var entMin = 5;  //minimum number of entries

// This is the html to be inserted into the form
var ent1 = '<div class="form-group field-thoughts-cmh0-thought required">';
var ent2 = '<label class="control-label" for="thoughts-cmh0-thought">cmh0.</label>';
var ent3 = '<input type="text" id="thoughts-cmh0-thought" class="form-control" name="Thoughts[cmh0][thought]">';
var ent4 = '<button type="button" class="entAdd"> Add Above </button> <button type="button" class="entDelete"> Delete </button>';
var ent5 = '<div class="help-block"></div>';
var ent6 = '</div>';
var ent = ent1 + ent2 + ent3 + ent4 + ent5 + ent6;

// This is to add another entry above
function addAbove(abo) {
    var count = $('[class^="form-group"]:last').attr('class');
    count = count.replace(/\D/g,'');
    count = parseInt(count);
    if (count >= entMax) { // Make sure the limit of entries hasn't been reached
        alert("Too many thoughts!");}
    else {
        $(abo).before(ent);
    }
}

// This sets all the identifying numbers properly
function setCount() {
    $.each($('#new-thoughts>div[class^="form-group field-thoughts-"]'), function(ind) {
        ind++;
        var container = $(this);                                    
        var classn = container.attr('class');
        var text = $(this).find('input').val();                     //Get value from user (so it's not lost when updated)
       
        var regex = /\d+/g;                                         //Regex in order to search tags for numbers
        
        if (container.html().indexOf('cmh0') > -1) {                //Check if random string present
            container.html(container.html().replace(/cmh0/g, ind)); //Replace all instances of random string

            var upcs = classn.replace(/cmh0/g,ind);                 //Replace random string in class attribute with index
            container.attr('class', upcs);                          //Replace random string in class...