JSFiddle - React, Tailwind, and code Playground

HTML

<!--Importing CSS stylesheets-->
<link rel="stylesheet" type="text/css"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>

<!--Importing Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
        integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
            
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>

<div>
  <select class="selectpicker" name="Food" data-none-selected-text="Select Option(s)..." multiple>
       <option value="Pizza">Pizza</option>
       <option value="Wings">Wings</option>
       <option value="Veggies">Veggies</option>
       <option value="Rice">Rice</option>
       <option value="Pasta">Pasta</option>
  </select>
</div>

<script>
	$('select').selectpicker({
    actionsBox: true,
  });
  $('select').each(function( index ) {
    var previousSelection = window.sessionStorage.getItem(`${$(this).attr('name')}`) ? JSON.parse(window.sessionStorage.getItem(`${$(this).attr('name')}`)): [];
    console.log(previousSelection)
  });

  $('select').on("change", function (e){
    window.sessionStorage.setItem(`${$(this).attr('name')}`,...