JSFiddle - React, Tailwind, and code Playground

by alexandre_lazaro

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />

<nav class="navbar navbar-light justify-content-center mt-2">
    <form class="form-row">
        <div class="form-group col-md-6">
          <label for="userSelect">User</label>
          <br/>
          <select class="selectpicker" multiple="" data-live-search="true" data-actions-box="true" title="Select user(s)" name="userSelect">
             <option>John</option>
             <option>James</option>
             <option>Stuart</option>
             <option>Eric</option>
             <option>Earl</option>
           </select>
         </div>
    </form>
</nav>
<div class="layout-margin-8 mt-4">
    <div class="card-deck">
        <div class="card text-white bg-success mb-3 text-center">
            <div class="card-body">
 ...

JavaScript

$('select').selectpicker();

        $('select').on('change', function() {

            var selected = $(this).find("option:selected");

            var arrSelected = [];
            
            selected.each(function() {

                arrSelected.push($(this).val());
                
                alert('' + arrSelected);
            });
        });