JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="global_nav">
    <ol class="menu">
    <li id="Section1">Section1</li>
    <li id="Section2">Section2
    <ol>
        <li id="subsection1">Subsection1</li>
            <li id="subsection2">Subsection2</li>
           <li id="subsection3">Subsection3</li>
      </ol>
      </li>
      <li id="Section3" >Item3</li>
  </ol>
</nav>
<form>
    <label for="nuevo">Insert</label>
    <input type="text" id="nuevo" />
    <label for="despues">After the section</label>
    <input type="text" id="despues" />
    <input type="button" id="btn" value="Insert" />
</form>

JavaScript

$("#btn").click(function(){

    var nuevo=$('#nuevo').val();
    var despues=$('#despues').val();
    
     $('<li></li>').text(nuevo).attr('id', nuevo).insertAfter("#"+despues);
    
 });