JSFiddle - React, Tailwind, and code Playground

by alwayshelping

HTML

<li class="drop-down"><a href="#" id="btnFileMgmt">File &nbsp; <i class="icofont-document-folder"></i></a>

          <ul id="filesMgmt">
              
          </ul>
        </li>

JavaScript

$(document).ready(function(){


      var files_management = '<li><a href="#" id="btnViewFiles">View Files</a></li>' + 
                             '<li class="drop-down"><a href="#" id="btnReports"> Reports </a>' + 
                                '<ul id="reportsMgmt">' + 
                                '</ul>' +
                             '</li>';

      var reports_management = '<li><a href="#" id="fileList">Files</a></li>' + 
                               '<li><a href="#" id="borrowList">Borrowed Files</a></li>';


      $("#btnFileMgmt").click(function(){
                 console.log('here')
          $('#filesMgmt').html(files_management);
      });

      $(document).on("click", "#btnReports", function() {
           console.log('here')
          $('#reportsMgmt').html(reports_management);
      });
      
      });