Prismjs

Dual Listboxes-html

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-header code-header" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            <h5>Select by class</h5>
            <i class="ti ti-code source" data-source="dlb1"&l></i>
          </div>
          <div class="card-body">
            <select class="select1" multiple>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>

Dual Listboxes-css

  .dual-listbox .dual-listbox__button {
    border-radius: 5px;
    background-color: rgba(var(--primary), 0.9);
    padding: 7px 12px;
  }
  .dual-listbox .dual-listbox__button:hover {
    background-color: rgba(var(--primary), 1);
    transition: all 0.3s ease;
  }

  .dual-listbox .dual-listbox__item.dual-listbox__item--selected {
    background-color: rgba(var(--primary), 0.1);
    color: rgba(var(--primary), 1);
  }

Dual Listboxes-scss

.dual-listbox {
     width: 100%;
     .dual-listbox__container{
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: unset;
     }
     .dual-listbox__search{
       color: rgba(var(--secondary), 1);
       padding: 0.4rem 0.75rem;
       border: 1px solid var(--border_color);
       border-radius: 0.3rem;
       &:focus{
         color: rgba(var(--dark), 1);
         box-shadow: 0 0 0 0.25rem rgba(var(--primary), 0.3);
         border: 1px solid rgba(var(--primary), 1);
         outline: none;
       }
     }
   }
   .dual-listbox .dual-listbox__title {
     font-weight: 600;
     color: rgba(var(--dark), 0.60);
     padding: 0.6rem 1rem;
     border-radius: 0.3rem 0.3rem 0 0;
     border-color: rgba(var(--dark), 0.20);
  }
   .dual-listbox .dual-listbox__available, .dual-listbox .dual-listbox__selected{
     border-radius: 0 0 0.3rem 0.3rem;
     border: 1px solid rgba(var(--dark), 0.20);
   }

Dual Listboxes-javascript

var dlb4 = new DualListbox(".select4", {
     showSortButtons: true,
  });
  var sources = document.querySelectorAll(".source");
  for (var i = 0; i < sources.length; i++) {
    var source = sources[i];
    source.addEventListener("click", function(event) {
      var code = document.querySelector("." + event.currentTarget.dataset.source);
      code.classList.toggle("open");
    });
  }