How can I improve this choice in the user interface

Question

I want to do something where the user can move tags around, and the user can add new tags between tags.

A cursor will appear if the user clicks between two tags to add additional tags.

I was able to get the first bit to work .

<input type="button" id="setValues" value="Set Values" /> <input type="button" id="clearValues" value="Clear Values" /> <div class="ui fluid selection search dropdown multiple sortable"> <input name="tags" type="hidden"> <div class="default text">Select</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item" data-value="angular">Angular</div> <div class="item" data-value="css">CSS</div> <div class="item" data-value="design">Graphic Design</div> <div class="item" data-value="ember">Ember</div> <div class="item" data-value="html">HTML</div> <div class="item" data-value="ia">Information Architecture</div> <div class="item" data-value="javascript">Javascript</div> <div class="item" data-value="mech">Mechanical Engineering</div> <div class="item" data-value="meteor">Meteor</div> <div class="item" data-value="node">NodeJS</div> <div class="item" data-value="plumbing">Plumbing</div> <div class="item" data-value="python">Python</div> <div class="item" data-value="rails">Rails</div> <div class="item" data-value="react">React</div> <div class="item" data-value="repair">Kitchen Repair</div> <div class="item" data-value="ruby">Ruby</div> <div class="item" data-value="ui">UI Design</div> <div class="item" data-value="ux">User Experience</div> </div> </div> 

 $(document).ready(function() { $('.ui.dropdown').dropdown({ onChange: function (value, text, $selectedItem) { console.log(value); }, forceSelection: false, selectOnKeydown: false, showOnFocus: false, on: "hover" }); }); $('#clearValues').click(function() { $('.ui.dropdown').dropdown("clear"); }); $('#setValues').click(function() { $('.ui.dropdown').dropdown("set selected", [ "angular", "css", "design", "ember", "html", "ia", "javascript", "mech", "meteor", "node", "plumbing", "python", "rails", "react", "repair", "ruby", "ui", "ux" ]); }); $(".sortable").sortable({ revert: true }); 

However, I could not complete the rest.

I want the same thing to happen in the image below.

Answer 1

Change the document ready for this.

 $(document).ready(function() { $('.ui.dropdown').dropdown({ onChange: function (value, text, $selectedItem) { console.log(value); }, on: "hover" }); });