## The Problem

This has nothing to do with bootstrap-tags per se. It's a byproduct of the way JavaScript creates variables.  Consider, for example, the following JavaScript:

    var array = ["A", "B"];
    var copy = array; 
    
    array.push("C");
    copy.push("D");
    
    console.log(array);
    console.log(copy);

Both `array` and `copy` will equal `["A", "B", "C", "D"]`

The object `copy` just contains a reference back to `array` so they both resolve to the same object.  Updating one updates both. See also: [value of an array changes original array][array].

## The Solution

What you want to do instead is [clone an object in javascript][clone], like this:

    var LISA = JSON.parse(JSON.stringify(topics));

Now `LISA ` will not be updated when `topics` changes.

### [Demo in fiddle (open up the console)][fiddle]

[fiddle]: http://jsfiddle.net/KyleMit/fV65e/
[clone]: https://stackoverflow.com/q/122102/1366033
[array]: https://stackoverflow.com/q/9024709/1366033

I have a situation where I need to remember what the value of a tagsinput field was before changes were made.  However, some of the information is dynamically binded so when the input changes so does the value of my variable that references it.  

    var topics = $("#topics").tagsinput('items');
    $('#topics').tagsinput('add', 'A');
    $('#topics').tagsinput('add', 'B');

    var LISA = topics;
    alert('Lisa is: ' + JSON.stringify(LISA));
    $('#topics').tagsinput('add', 'newone');
    alert('Lisa is: ' + JSON.stringify(LISA));

So what I'd like is the variable `Lisa` to *not* have `newone` added to it.  

But with the bootstrap tags input jQuery plugin the variable changes dynamically with the values.  Anyone know how to turn off this binding so I can recall what the value of the field was *before* new information is added? 

Bootstrap tags input binding issue

Without seeing what's in your lib folder, it's impossible for us to know what's going wrong.  

If you use appropriate CDN's for all of the libraries then everything will work correctly:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Bootstrap Tags Input</title>
    
      <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
      <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
      <link rel="stylesheet" href="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />
    </head>
    <body>

      <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
    
      <script src="http://code.angularjs.org/1.2.15/angular.js" ></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
      <script src="http://timschlechter.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js"></script>
      <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput-angular.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
    </body>
    </html>

### [Demo in Plunker](http://plnkr.co/edit/VoWL2b0RDH7OaUFdF3CC?p=preview)

That said, you have a lot of conflicting libraries here.  Are you using [`ng-tags-input`][ngTagsInput] or [`bootstrap-tagsinput`][bootstrap-tagsinput] or [`bootstrap-tagsinput-angular`][bootstrap-tagsinput-angular]? You should pick one and pick a development strategy around it to avoid conflicts.

For instance, these are the only [libraries][cdn] actually being used in the above example:

    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

[ngTagsInput]: http://mbenford.github.io/ngTagsInput/
[bootstrap-tagsinput]: http://timschlechter.github.io/bootstrap-tagsinput/examples/
[bootstrap-tagsinput-angular]: http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2.html#angular

[cdn]: http://www.jsdelivr.com/#!bootstrap.tagsinput

I have been trying to use Bootstrap Tags Input like the example from this link:
http://timschlechter.github.io/bootstrap-tagsinput/examples/
This is my code:

    <!DOCTYPE html>
    <html>
    
      <head>
        <meta charset="utf-8" />
        <title>Bootstrap Tags Input</title>
    
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.css" />
        <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
       
        <link rel="stylesheet" href="libs/bootstrap-tagsinput.css" />
    
       
      </head>
    
      <body>
    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
    
     <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js"></script>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
         <script src="libs/bootstrap/js/bootstrap.min.js"></script>
         <script src="libs/bootstrap-tagsinput.js"></script>
         <script src="libs/bootstrap-tagsinput-angular.js"></script>
         <script src="libs/typeahead.bundle.js"></script>
      </body>
    
    </html>


But the code does not seem to work. Any ideas or thought on how to make this work?
Thanks!

Using Bootstrap Tags Input to work

To create the tag portion, you can use [**bootstrap-tagsinput** by Tim Schlechter][2] and then style it similar to [Bootstrap's Input Group][1] with some custom styling like this:


[![Tags Input Group][5]][5]

### Demo in [jsFiddle][6] & Stack Snippets





    .input-group .bootstrap-tagsinput {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%
    }
    .input-group-btn {
        height: 0px;
    }
    .input-group-btn .btn {
        height: 100%;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>


    <div class="input-group">
      <input type="text" 
             class="bootstrap-tagsinput form-control" 
             data-role="tagsinput" 
             value="Amsterdam,Washington,Sydney,Beijing,Cairo" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div>





---

# Dismissable Alert

If you're just trying to style a removable element, you can do that similar to [Bootstrap's Dismissable Alert][3], with some custom styling which will look like this:

[![Alert-Tag][4]][4]

### Demo in [jsFiddle][6] & Stack Snippets:





    .alert.alert-tag {
        display: inline-block;
        padding: 5px;
        padding-bottom:2px;
        margin: 5px;
    }
    .alert-tag.alert-dismissible {
        padding-right: 25px;
    }



    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

    <div class="alert alert-warning alert-dismissible fade in alert-tag" role="alert"> 
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button> 
      Label
    </div>







  [6]: http://jsfiddle.net/KyleMit/spvywgry/
  [2]: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

  [1]: https://getbootstrap.com/docs/3.3/components/#input-groups

  [3]: https://getbootstrap.com/docs/3.3/javascript/#alerts
  [4]: https://i.stack.imgur.com/B2G1y.png
  [5]: https://i.stack.imgur.com/Itfxy.png

I try to make a tag list (like in stackoverflow) using a [bootstrap 3 input group][1].

The result should look similar to this with a full height button on the right:

[![should look similar to this][2]][3]


The base for my considerations looks like this:



    <div class="container-fluid">
        <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>
    </div>

Here is my attempt to make a tag list out of it (please note that it should have multiple lines)

HTML:



    <div class="container-fluid">
        <div class="input-group">
            <div class="form-control">
                <ul>
                    <li><span class="label label-default">Default</span></li>
                    <li><span class="label label-primary">Primary</span></li>
                    <li><span class="label label-success">Success</span></li>
                    ... even more labels ...
                    <li><span class="label label-default">Default</span></li>
                    <li><span class="label label-primary">Primary</span></li>
                    <li><span class="label label-success">Success</span></li>
                </ul>
                <input type="text">
            </div>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div>
    </div>

CSS:



    ul {
        padding-left: 0;
        display: inline;
        list-style-type: none;
    }
    li {
        display: inline-block;
    }

[Running demo in fiddle](http://jsfiddle.net/bc3yh42k/)

However, that doesn't work as expected.



  [1]: http://getbootstrap.com/components/#input-groups
  [2]: http://i.stack.imgur.com/OgpAr.png
[3]: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/