Extend and remove toolbar buttons
<p>We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.</p>

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

<p>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...</p>

<p>My main questions are:</p>

<blockquote>
  <ol>
  <li>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.</li>
  <li>How to structure the project</li>
  <li>I want to divide the button's functionality into different javascript files
  and load them together in the <code>index.html</code>. 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</li>
  </ol>
</blockquote>

<p>Project structure </p>

<pre><code>myProj
  &gt;index.html
  &gt;css
    &gt;&gt; style.css
  &gt;js
   &gt;&gt;script.js
</code></pre>

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

<p><em>Any example will be very helpful</em></p>

<p>This is for example of the HTML code and all the handlers logic inside the jsFile</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="toggle-button"&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="menu-bar menu-bar-top"&gt;&lt;/div&gt;
    &lt;div class="menu-bar menu-bar-middle"&gt;&lt;/div&gt;
    &lt;div class="menu-bar menu-bar-bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

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

                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/li&gt;

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

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

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>