JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gw-sidebar" class="gw-sidebar">
    <div class="nano-content">
        <ul class="gw-nav gw-nav-list">
            <li class="init-un-active"> <a href="javascript:void(0)"> <span class="gw-menu-text">Scenarios</span> </a> 
            </li>//===>Need to add the new list using Jquery here</ul>
    </div>
    <script id="hidden-template" type="text/x-custom-template">
        < li class = "init-arrow-down" > < a href = "javascript:void(0)" > < span class = "gw-menu-text" > Scenario - 1 < /span> <b class="gw-arrow"></b > < /a>
          <ul class="gw-submenu">
            <li> <a href="javascript:void(0)">Scenario</a > < /li>
            <li> <a href="javascript:void(0)">Resolutions</a > < /li>
            <li> <a href="javascript:void(0)">Triggers</a > < /li>
          </ul > < /li>
    </script>

JavaScript

$(document).ready(function () {
    $('a').click(function () {
        var template = $('#hidden-template').html();
        $('.gw-nav').append(template);
    });
});