JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://nicolasbize.com/magicsuggest/tutorial/5/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="http://nicolasbize.com/magicsuggest/tutorial/5/lib/magicsuggest/magicsuggest.js"></script>
<link rel="stylesheet" href="http://nicolasbize.com/magicsuggest/tutorial/5/lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://nicolasbize.com/magicsuggest/tutorial/5/lib/magicsuggest/magicsuggest.css">
<form action="subscribe.php" method="post">
    <div class="form-group">
        <label>Tags</label>
        <div class="suggest-tag"></div>
    </div>
    <div class="form-group">
        <label>Tags</label>
        <div class="suggest-tag2" value="[1,2]"></div>
    </div>
</form>

<input type="button" class="btn" value="Get tags"/>

JavaScript

$(function() {
  $('.suggest-tag').magicSuggest({
            data: [{"Id": 1, "Name": "hello"}, {"Id": 2, "Name": "world"}, {"Id": 3, "Name": "no"}],
            valueField: 'Id',
            displayField: 'Name',
            value: [1, 2] // select 'hello', 'world'
  });
    
  $('.suggest-tag2').magicSuggest({
            data: [{"Id": 1, "Name": "hello"}, {"Id": 2, "Name": "world"}, {"Id": 3, "Name": "no"}],
            valueField: 'Id',
            displayField: 'Name'
  });
});