title: Modal not opening
body: <p>Im pretty new to coding and i've been trying to make a wepage that works as a user interface. In the UI there is buttons that is suppose to launch application using javaScript (not quite there yet) and 2 buttons that open modals on top of the current screen: Help and Settings. </p>
  
  <p>Code for the modals:</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;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
   
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;button class="btn btn-default" data-toggle="modal" data-target="#settings"&gt;
    &lt;img src="img/settings.png" alt="" class="img-circle"&gt;
  &lt;/button&gt;
  &lt;button class="btn btn-default" data-toggle="modal" data-target="#help"&gt;
    &lt;img src="img/help.png" alt="" class="img-circle"&gt;
  &lt;/button&gt;
  
  
  &lt;div id="settings" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;Settings&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;h4&gt; Tethering&lt;/h4&gt;
          &lt;label&gt;Name:&lt;/label&gt;
          &lt;input type="text" id="wlanName" size="15"&gt;
          &lt;label&gt;Passphrase:&lt;/label&gt;
          &lt;input type="text" id="passPhrase" size="15"&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;button type="button" class="btn btn-success" onclick="enableTethering()"&gt;Enable tethering&lt;/button&gt;
          &lt;button type="button" class="btn btn-danger" onclick="disableTethering()"&gt;Disable tethering&lt;/button&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
  
    &lt;div id="help" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h3 class="modal-title"&gt;Help&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            *CONTENT TO BE MADE*
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The issue is, that the first modal works fine. Second modal only "dims" the background, but the modal it self wont come visible. In this case, the settings work fine, but the help does not. If swap the help code before the settings code, then help works and settings does not. </p>
  
  <p>But, when i coded it, i had typo. The second div of the modal were typed
       instead of  but everything worked, after i switched the