title: Bootstrap Tags Input - Add Between Tags
body: <p>I have a tag input field where I have to make some changes.
  For example, I have this field previously ->
  <a href="https://i.stack.imgur.com/YsLcR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsLcR.png" alt="Initial State"></a></p>
  
  <p>I move the cursor back with my arrow keys and delete the "test" tag ->
  <a href="https://i.stack.imgur.com/DNVXI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DNVXI.png" alt="Deleted Tag"></a></p>
  
  <p>I then re-enter it again in that same location ->
  <a href="https://i.stack.imgur.com/tTV0y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tTV0y.png" alt="Entered Again"></a></p>
  
  <p>I press the right arrow key and put the cursor back to it's location. I submit the form like shown in the previous picture with the order "test,phrase". But the result comes as "phrase,test". I would like to preserve the order in which I edited it. Any idea what's wrong here ?</p>
  
  <p><a href="https://i.stack.imgur.com/hIrkI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIrkI.png" alt="enter image description here"></a></p>
  
  <p>The HTML code-></p>
  
  <pre><code>&lt;div class="col-md-8 col-xs-12"&gt;
      &lt;input type="text" data-role="tagsinput" class="form-control" name="phrases" placeholder="Enter Phrases In Order" value="&lt;?php echo $phrases;?&gt;" required&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The php variable $phrases is being retreived from MySQL in a comma separated format.</p>
  
  <pre><code>$phrases="test,phrase";
  </code></pre>
  
  <p>Not much code really. I just want to preserve the order after I have edited it.</p>