title: How can I add columns to jQuery select2 js multiselect dropdown
body: <p>I have a form of multiselect dropdown using jQuery select2 js library,
  list items is about medical drugs.</p>
  <p>I want to add a new column after any selected drug to put how many times should the patient use the medicine in &quot;<strong>morning</strong>&quot; - &quot;<strong>evening</strong>&quot; - &quot;<strong>night</strong>&quot;</p>
  <p>In addition with a column header to put the column labels.</p>
  <p><a href="https://i.stack.imgur.com/22P5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22P5x.png" alt="enter image description here" /></a></p>
  <p><strong>Update #1</strong> - final result preview:</p>
  <p>This is how I want the final result to be:</p>
  <p><a href="https://i.stack.imgur.com/7cX0W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7cX0W.png" alt="enter image description here" /></a></p>
  <p><strong>Update #2</strong> - initial code:</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;symptoms drugs&quot;&gt;
  &lt;div class=&quot;col-lg-4 mg-b-20 mg-lg-b-0&quot; style=&quot;width: 100%; padding-left: 0&quot;&gt;
    &lt;div class=&quot;d-flex align-items-center&quot;&gt;
      &lt;h3 class=&quot;diagnose_heading custom_heading&quot; style=&quot;margin-bottom: 1rem; margin-top: 1rem&quot;&gt;
        Medical Drugs:
      &lt;/h3&gt;
      &lt;span class=&quot;tx-danger span_required&quot;&gt;(*) Required&lt;/span&gt;
    &lt;/div&gt;
    &lt;select class=&quot;form-control select2&quot; multiple=&quot;multiple&quot; style=&quot;width: 100%&quot; name=&quot;symptoms[]&quot;&gt;
      &lt;option value=&quot;1&quot;&gt;drug name 1&lt;/option&gt;
      &lt;option value=&quot;2&quot;&gt;drug name 2&lt;/option&gt;
      &lt;option value=&quot;3&quot;&gt;drug name 3&lt;/option&gt;
      &lt;option value=&quot;4&quot;&gt;drug name 4&lt;/option&gt;
      &lt;option value=&quot;5&quot;&gt;drug name 5&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JavaScript code:</p>
  <pre><code> &lt;script src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
   &lt;script src=&quot;select2.js&quot;&gt;&lt;/script&gt;
   &lt;script&gt;
      var items = $(&quot;.select2&quot;).find(&quot;:selected&quot;);
      $(&quot;.select2&quot;).select2({
        // ...
        templateSelection: function (data, container) {
          // Add custom attributes to the &lt;option&gt; tag for the selected option
          $(data.element).attr(&quot;data-custom-attribute&quot;, data.customValue);
          return data.text;
        },
      });
  &lt;/script&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>  &lt;link rel=&quot;stylesheet&quot; href=&quot;select2.min.css&quot; /&gt;
    &lt;style&gt;
      .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: &quot;&quot;;
        background-image: url(&quot;/assets/img/patterns/04.png&quot;);
        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: &quot;&quot;;
        background-image: url(&quot;/assets/img/patterns/04.png&quot;);
        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;
      }
  
    &lt;/style&gt;
  </code></pre>