How can I add columns to jQuery select2 js multiselect dropdown

Question

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>

Answer 1

I figure out the solution,

Final Result preview

I created a table underneath of select tag

<table class="target" cellSpacing="0" cellPadding="0"> </table>

in JavaScript after the initial code of select2.js

$(".select2").select2({
  placeholder: "Select a value",
  // ...
  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;
  },
});

I added these lines of code:

$(".select2").on('change', function(e){
      let elementsVal = $('.select2').select2().val();
      var items = $(".select2").find(":selected");
      $('.target').css('display','table');
      $('.target').children('tr').remove();
      $('.target').append("<tr class='target_column_div'>"+
        "<th>Value</th>"+
        "<th>Text</th>"+
        "<th>Morning</th>"+
        "<th>Evening</th>"+
        "<th>Night</th>"

        +"</tr>");
      for(let i=0; i<elementsVal.length; i++) {
        $('.target').append(
          "<tr class='target_div'>" + 
              "<td class='target_item'>" + elementsVal[i] + "</td>" +
              "<td class='target_item'>" + 'item of value ' + items[i].innerText + "</td>" +
              "<td><input type='number' class='target_item_input' /></td>" +
              "<td><input type='number' class='target_item_input' /></td>" +
              "<td><input type='number' class='target_item_input' /></td>" +
            "</tr>"
          )
      }
      
});

I also added some CSS styles to it:

.target {
  margin-top: 1rem;
  background-color: #eee;
  padding: .5rem;
  width: 100%;
  position: relative;
  display: none;
  text-align:center;
}
 .target_div {

}
.target_column_div > th,
.target_div > td {
  border:1px solid #444;
  padding: .5rem;
}
.target_div:nth-last-child(1) {
  margin-bottom: 0;
}
.target_item {
  /* display: block; */
  background-color: bisque;
  padding: .5rem 1rem;
  font-weight: bold;
}
.select2 {
  font-weight: bold;
}
.target_item_input {
  padding: .4rem .8rem;
  border-radius: 1rem;
  outline: none;
  text-align: center;
  border: 2px solid #1199eec7;
  font-weight: bold;
}