JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="list">
    <li id='1'>
        <textarea class='inputBelief' rows='1' cols='50'>id is 1</textarea>
    </li>
    <li id='2'>
        <textarea class='inputBelief' rows='1' cols='50'>id is 2</textarea>
    </li>
    <li id='4'>
        <textarea class='inputBelief' rows='1' cols='50'>id is 4</textarea>
    </li>
</ol>
<a class="addParent" href="#">add line</a>

JavaScript

$(document).ready(function () {
    $(".addParent").click(function () {

        var IDs = $("#list li[id]")
            .map(function () {
            return this.id;
        })
            .get();

        var num = 3; // ($("#list").children().length) + 1;

        if (jQuery.inArray(num, IDs) == -1) {
            num++;
        }

        $("#list").append("<li id='" + num + "'><textarea class='inputBelief' rows='1' cols='50'>id is " + num + "</textarea></li>");

        return false;
    });
});