How can I add columns to jQuery select2 js multiselect dropdown

I have a form of multiselect dropdown using jQuery select2 js library, list items is about medical drugs.

I want to add a new column after any selected drug to put how many times should the patient use the medicine in "morning" - "evening" - "night"

In addition with a column header to put the column labels.

Update #1 - final result preview:

This is how I want the final result to be:

Update #2 - initial code:

HTML:

<div class="symptoms drugs">
<div class="col-lg-4 mg-b-20 mg-lg-b-0" style="width: 100%; padding-left: 0">
  <div class="d-flex align-items-center">
    <h3 class="diagnose_heading custom_heading" style="margin-bottom: 1rem; margin-top: 1rem">
      Medical Drugs:
    </h3>
    <span class="tx-danger span_required">(*) Required</span>
  </div>
  <select class="form-control select2" multiple="multiple" style="width: 100%" name="symptoms[]">
    <option value="1">drug name 1</option>
    <option value="2">drug name 2</option>
    <option value="3">drug name 3</option>
    <option value="4">drug name 4</option>
    <option value="5">drug name 5</option>
  </select>
</div>
</div>

JavaScript code:

 <script src="jquery.min.js"></script>
 <script src="select2.js"></script>
 <script>
    var items = $(".select2").find(":selected");
    $(".select2").select2({
      // ...
      templateSelection: function (data, container) {
        // Add custom attributes to the <option> tag for the selected option
        $(data.element).attr("data-custom-attribute", data.customValue);
        return data.text;
      },
    });
</script>

CSS:

  <link rel="stylesheet" href="select2.min.css" />
  <style>
    .select2-container {
      width: 100% !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
      float: left !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
      left: auto !important;
      right: 0 !important;
    }

    .symptoms .select2-container {
      width: 76.5vw !important;
    }

    .drugs .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      display: flex;
      padding: 0.3rem 0.5rem 0.5rem !important;
      flex-direction: column;
      cursor: pointer;
    }

    .drugs .select2-container--default .select2-selection--multiple .select2-selection__choice {
      float: none;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
      font-size: 1rem !important;
      top: 2px !important;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
      width: 76.5vw !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
      width: 100% !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
      padding-left: 2rem !important;
    }

    .symptoms {
      position: relative;
    }

    .symptoms::before {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-image: url("/assets/img/patterns/04.png");
      opacity: 0.3;
      background-size: contain;
    }

    .initial_diagnose label {
      position: relative;
    }

    .initial_diagnose label::before {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      background-image: url("/assets/img/patterns/04.png");
      opacity: 0.3;
      background-size: cover;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      float: left !important;
      background-color: #1199eec7 !important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #1199eec7 !important;
    }

  </style>