title: $(...).tagsinput is not a function
body: <p>I must be missing something simple but I can't see it. I am using the Bootstrap tagsinput plugin and I am trying to follow some of the examples here:
  <a href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/" rel="nofollow">http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input id="cities" class="form-control" value="New York,London" data-role="tagsinput" type="text"&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.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(function() {
          $('#cities').tagsinput({
            maxTags: 3
          });
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am getting the following Javascript error:</p>
  
  <pre><code>tagsinput.html:15 Uncaught TypeError: $(...).tagsinput is not a function
  </code></pre>
  
  <p>I tried removing <code>data-role="tagsinput"</code> as suggested in <a href="https://stackoverflow.com/questions/20125061/tagsinput-is-not-a-function-using-bootstrap-3-and-tags-input-plugin">this SO answer</a> but the input becomes a regular textbox and the exception still occurs.</p>
  
  <p>What am I doing wrong?</p>