JSFiddle - React, Tailwind, and code Playground

by kevindougans

HTML

<input style="" id="input_4" name="input_4" value="" />
                        <ol id="selectable">
                            <li class="ui-widget-content">Reservations </li>
                            <li class="ui-widget-content">Information and Enquiries</li>
                            <li class="ui-widget-content">Mambo Tours &amp; Events</li>
                            <li class="ui-widget-content">Press, Marketing &amp; PR</li>
                            <li class="ui-widget-content">Business Development &amp; Franchise</li>
                            <li class="ui-widget-content">Mambo TV &amp; Livestreaming</li>
                            <li class="ui-widget-content">Mambo Studio</li>
                            <li class="ui-widget-content">VIP Services</li>
                            <li class="ui-widget-content">Merchandise</li>
                            <li class="ui-widget-content">Wedding Planning</li>
                            <li class="ui-widget-content">Club Tickets</li>
                        </ol>

CSS

#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; margin: 0; padding: 0; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 250px; }
    #selectable li { margin: 3px; padding: 0.4em; font-size: 12px; height: 18px; }

JavaScript

$(function() {
    $("#selectable").selectable(selected: function(event, ui) { 
            var text = $(this).text();
            $("#input_4").val(text); 
      });

});