Extend and remove toolbar buttons

Question

We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.

This toolbar is working as expected, but now there is a new requirement to provide a mechanism to extend this toolbar with new buttons from the outside (maybe via json configuration...), or to remove the default buttons.

e.g, imagine that we provided this toolbar as a service and there are options to be able to add/remove buttons by configuration or something, currently not sure how...

My main questions are:

1. What pattern (design pattern) should I use to extend this toolbar(if possible of course :) ). Please keep in mind that someone that wants to extend the toolbar should provide the buttons with the logic.
2. How to structure the project
3. I want to divide the button's functionality into different javascript files and load them together in the index.html. What's the recommended way to do it? Note: I cannot use ES6(should support IE11 also :( ) and I don't use node js to have WebPack/Gulp/Grunt

Project structure

myProj
  >index.html
  >css
    >> style.css
  >js
   >>script.js

Now I want to divide this big script into smaller files (like question 3), which technique should I use? Maybe require.js (since I don't have the option to compile...

Any example will be very helpful

This is for example of the HTML code and all the handlers logic inside the jsFile

<div class="toggle-button">
  <div class="wrapper">
    <div class="menu-bar menu-bar-top"></div>
    <div class="menu-bar menu-bar-middle"></div>
    <div class="menu-bar menu-bar-bottom"></div>
  </div>
</div>

<nav id="navi" class="navbar navbar-inverse menuBar">
  <div class="container-fluid back">
    <div class="navbar-header">
      <a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
    </div>
    
    <ul class="nav navbar-nav">
      <li id="dropdown1" class="dropdown open keep-open">
        <a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading"  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                <a>
                  Collapsible Group 1</a>
              </div>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="nav navbar-nav">
                    <li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                  Collapsible Group 2</a>
              </div>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  <ul class="nav navbar-nav">
                    <li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
                    <li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                  Collapsible Group 3</a>
              </div>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">

                </div>
              </div>
            </div>
          </div>
        </ul>
      </li>

      <li><a href="#" id="list1" class="glyphicon glyphicon-phone" onclick="list1(this)"></a></li>
    </ul>
 
    <ul class="nav navbar-nav" style="margin-left:25%;">
      <form class="navbar-form navbar-left">
        <div class="input-group">
          <span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>   
          <input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
        </div>
      </form>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
          <span class="badge badge-danger">2</span><span class="caret"></span>
        </a>
        <ul class="dropdown-menu notif" style="padding:20%;">
          <li>Hello</li>
          <hr>
          <li>Notif 2</li>
          <hr>
          <li>Notif 3</li>
        </ul>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
          <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#" onclick="language(this)">English</a></li>
          <li><a href="#" onclick="language(this)">Hebrew</a></li>
          <li><a href="#" onclick="language(this)">Finnish</a></li>
        </ul>
      </li>
      
      <li><a href="#" onclick="logout()"><span class="glyphicon glyphicon-log-in"></span></a></li>
    </ul>
  </div>
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

A great example of a preexisting, widely-used, and well-supported library that does the exact things you are requesting is TinyMCE 4. I highly recommend you look at their source code.

Specifically their Editor class, which contains a good example of configuration options including toolbars and buttons. Also check out AddOnManager, which uses ScriptManager to load the necessary pieces as well as plugins, languages, etc.

It may make you dizzy digging through it all but if you need help there is a big community behind it that could point you in the right direction.