JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" integrity="sha512-paVHVRRhdoOu1nOXKnqDC1Vka0nh7FAmU3nsM4n2FKxOQTeF6crMdMfkVvEsuaOXZ6oEAVL5+wLbQcule/Xdag==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js" integrity="sha512-nIwdJlD5/vHj23CbO2iHCXtsqzdTTx3e3uAmpTm4x2Y8xCIFyWu4cSIV8GaGe2UNVq86/1h9EgUZy7tn243qdA==" crossorigin="anonymous"></script>
<div class="w-4/12 pl-4 pr-4">
   <label for="recipe_type" class="mb-1 text-xs sm:text-sm tracking-wide text-gray-500">Type</label>
   <select x-cloak id="recipe_type" required>
      <option class="py-1" value="1">Val1</option>
      <option class="py-1" value="2">Val2</option>
      <option class="py-1" value="3">Val3</option>
      <option class="py-1" value="5">Val5</option>
      <option class="py-1" value="7">Val7</option>
      <option class="py-1" value="8">Val8</option>
   </select>
   <div x-data="dropdownBis(['Val3', 'Val5'])" x-init="loadOptionsBis()" class="w-full flex flex-col items-center sh-64 mx-auto">
      <input name="recipe_type" id="hidden_in_recipe_type" value="" type="hidden" x-bind:value="selectedValuesBis()">
      <div class="inline-block relative w-full">
         <div class="flex flex-col items-center relative">
            <div x-on:click="open" class="w-full">
               <div class="my-2 p-1 flex border border-gray-200 bg-white rounded">
                  <div class="flex flex-auto flex-wrap">
                     <template x-for="(option,index) in selected" :key="options[option].value">
                        <div class="flex justify-center items-center m-1 font-medium py-1 px-1 bg-white rounded bg-gray-100 border">
                           <div class="text-xs font-normal leading-none max-w-full flex-initial x-model=" options[option] x-text="options[option].text"></div>
                ...

CSS

[x-cloak] {
  display: none;
}

.svg-icon {
  width: 1em;
  height: 1em;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #333;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

JavaScript

function dropdownBis(init_values = []) {
    return {
        options: [],
        selected: [],
        show: false,
        open() {
            this.show = true
        },
        close() {
            this.show = false
        },
        isOpen() {
            return this.show === true
        },
        selectBis(index, event) {
     
            if (!this.options[index].selected) {

                this.options[index].selected = true;
                this.options[index].element = event.target;
                this.selected.push(index);

            } else {
                this.selected.splice(this.selected.lastIndexOf(index), 1);
                this.options[index].selected = false
            }
           
        },
        removeBis(index, option) {
            this.options[option].selected = false;
            this.selected.splice(index, 1);


        },
        loadOptionsBis() {
            const options = document.getElementById('recipe_type').options;
            for (let i = 0; i < options.length; i++) {
                this.options.push({
                    value: options[i].value,
                    text: options[i].innerText,
                    selected: options[i].getAttribute('selected') != null ? options[i].getAttribute('selected') : false
                });
            }
            
            for (let i = 0; i < this.options.length; i++) {
            		if (init_values.includes(this.options[i].text)) {
                  this.options[i].selected = true;
                  this.options[i].element = event.target;
                  this.selected.push(i);
                }
            }
        },
        selectedValuesBis() {
            return this.selected.map((option) => {
                return this.options[option].value;
            })
        }
    }
}