JSFiddle - React, Tailwind, and code Playground

by Kriti

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