JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
  <title>jQuery Tagit Demo Page (HTML)</title>
  <script src="demo/js/jquery.1.7.2.min.js"></script>
  <script src="demo/js/jquery-ui.1.8.20.min.js"></script>
  <script src="js/tagit.js"></script>

  <link href="demo/css/demo.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" type="text/css" href="demo/css/jquery-ui-base-1.8.20.css">
  <link rel="stylesheet" type="text/css" href="css/tagit-stylish-yellow.css">

</head>
<body>

<div id="wrap">

<h1>jQuery Tagit Demo Page</h1>

<div class="box"><a href="docs.html">View the documentation!</a></div>

<h2><a name="demos">Demos</a></h2>

<h3>Hidden Select</h3>


<h3>Initial Tags</h3>

<div class="box">
  <div class="note">
    You can manually specify tags in your markup by adding <em>list items</em> to the unordered list!
  </div>

    <ul id="demo2" data-name="demo2">
        <li data-value="here">here</li>
        <li data-value="are">are</li>
        <li data-value="some...">some</li>
        <!-- notice that this tag is setting a different value :) -->
        <li data-value="initial">initial</li>
        <li data-value="tags">tags</li>
    </ul>
  <div class="buttons">
    <button id="demo2GetTags" value="Get Tags">Get Tags</button>
    <button id="demo2ResetTags" value="Reset Tags">Reset Tags</button>
    <button id="view-tags">View Tags on the console </button>
  </div>
</div>

<h3>Allowing Spaces</h3>

<div class="box">

</div>

<div class="box">
  &copy; Content and Design Matthew Hailwood 2012<br/>
</div>

</div>
</body>
</html>

JavaScript

$(document).ready(function () {
    
       
    var list = new Array();
      var availableTags = [];

     $('#demo2').tagit({tagSource:availableTags});
     
    $('li[data-value]').each(function(){
            alert($(this).data("value"));
        });
        
      
      $('#demo2GetTags').click(function () {
        showTags($('#demo2').tagit('tags'))
      });
    

      function showTags(tags) {
        console.log(tags);
        var string = "Tags (label : value)\r\n";
        string += "--------\r\n";
        for (var i in tags)
          string += tags[i].label + " : " + tags[i].value + "\r\n";
        alert(string);
      }
      
        $('li[data-value]').each(function(){
            alert($(this).data("value"));
            });
            
    
        
    });