JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<div class="autocompleter">
    <script>
    autocompleter.projects  = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
      }
    ];
    </script>
    <label>Select a project (type "j" for a start):
        <input type=search placeholder="&#x1f50d; search" name="project" data-using="projects">
    <label>
    <p class="description">&nbsp;</p>
 </div>
<hr>
<br>
 <div class="autocompleter">
    <script>
    autocompleter.meals = [
      {
        value: "breakfast",
        label: "breakfast",
        desc: "The most important meal of the day",
      },
      {
        value: "lunch",
        label: "lunch",
        desc: "A midday meal",
      },
      {
        value: "dinner",
        label: "dinner",
        desc: "Eat your dinner, or you get no dessert!",
      }
    ];
    </script>
    <label>Select a meal:
        <input type=search placeholder="&#x1f50d; Meal" name="meal" data-using="meals">
    <label>
    <p class="description">&nbsp;</p>
 </div>
<hr>
<br> 
<ul>
   <li><b>2 1/4 Cups</b> flour (all-purpose)</li>
   <li><b>1 teaspoon</b> baking soda</li>
   <li><b>1 teaspoon</b> salt</li>
   <li><b>1 Cup</b> (2 sticks) softened butter</li>
   <li><b>1/2 Cup</b> sugar</li>
   <li><b>1/2 Cup</b> powdered sugar (packed)</li>
   <li><b>3/4 Cup</b> packed dark brown sugar</li>
   <li><b>1 Teaspoon</b> pure vanilla extract</li>
   <li><b>4 </b>egg yolks (or 2 large eggs)</li>
   <li>
 <div class="autocompleter">
    <script>
    autocompleter.addins = [{
        value: "M&M's Baking Bits Milk Chocolate Minis",
        label: "",
        desc: " Yummy M&M's",
    }, {
        value: "White Baking Chips",
        label: "",
   ...

CSS

<!--  required in the head, only once -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style> /* this can go into a css file*/
    .autocompleter label
    {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
    }

    .autocompleter .description
    {
        margin: 0;
        padding: 0;
    }
    .autocompleter p, .autocompleter label{display:inline}
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--  end of required in the head -->
<!--  required in the head  for all class=autocompleter-->
  <script>
    var autocompleter={};
    $(function() {
        $(document).on("click",".ui-menu-item-wrapper a[target]",function(){
            return false
        })
        $(".autocompleter").each(function() {
            var input = $("input",this);
            var ac=autocompleter[ input.data("using") ];
            if (!ac) throw "autocompleter using '"+input.data("using")+"' is not defined"
            console.log(input.data("using"),ac);
            input.autocomplete({
                minLength: 0,
                source: ac,
                open: function(event, ui) {
                    $(this).autocomplete("widget").position({
                          my: "left top",
                          at: "right+10 top",
                          of: input
                    }) // move it to the side.
                },
                focus: select,
                select: select
            })
            .autocomplete("instance")._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<div>" + item.label + "<br>" + item.desc + "</div>")
                    .appendTo(ul);
            };
        function select(event, ui) {
            $(this).val(ui.item.label);
            $(this).next().html(ui.item.desc);
        }
        })
   ...