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 = $("#list").children().length + 1;

        while (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;
    });
});