JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>list1
        <input type="button" value="add" />
    </li>
    <li>list2
        <input type="button" value="add" />
    </li>
   
</ol>

CSS

ol {
    list-style:none;
}

JavaScript

$(document).ready(function () {
var childLimiter = 3;
    
  $('body').on('click', 'ol li input', function(){
        var listItems = $('ol').children('li').length;
      if(listItems <= childLimiter){
        $(this).parent().append('<ol><li>child node<input type="button" value="add" /></li></ol>');
      
      } else {
          $(this).parent().append('<ol><li>child node</li></ol>');
      }
    });
    

});