Dynamic option creation FEATURE REQUEST value WITH subtext (tags:true)

[jmw11x]

1. https://select2.org/tagging
   I would like to be able to do this BUT in addition allow a user to enter a subtext as well. Setting tags true is great, ran into a requirement needing a subtext as well how could we handle things like user wanting to enter data like value -> subtext in a 'tags : true' type of UI.

Want to be able to input name -> email and have change event fire to trigger database write.
2.

4. SCREENSHOT
   

5. EMPTY

6. STEPS
   -Set tags : true to enable user input https://select2.org/tagging
   -Allow some way to add a subtext to value being inputed in the way from dynamic option creation.

8. VERSIONS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script> <script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

// here is a code to populate names and emails in select 2 from firestore database
// notice how all data has an email subtext and I cannot have users dynamically add this option subtext with 'tags : true'
// THIS(above) is exact description of problem.
docRef.onSnapshot(function (snapshot) {

snapshot.docChanges().forEach(function (change) {

    if (change.type === "added") {

        const data = change.doc.data();
        const name = document.createElement("option");
        name.innerHTML=`${data.firstName}:${data.email}`;
        // name.style.textAlign='center'
        const id = data.firstName+':'+data.email + i
        data_select2.push({id:id, text: data.firstName, subText: data.email})
        data_select21.push({id:id, text: data.firstName, subText: data.email})
        localStorage.setItem('usersselect2',JSON.stringify(data_select2))
        localStorage.setItem('usersselect21',JSON.stringify(data_select2))
        i = i+1;
      // GENERATE SAME SELECT 2 Data for TWO different <select> elements.
        $('#inviteselectelement').select2({

          tags: true,
            data: data_select2,
            placeholder: 'Select Invites',
            escapeMarkup: function (markup) {
              return markup;
            },
            templateResult: function (d) {
              return '<span>' + d.text + '</span><span class="pull-right subtext">' + d.subText + '</span>';
            },
            templateSelection: function (d) {
              return d.text + ' ( ' + d.subText + ')';
            },
            insertTag: function (data, tag) {
              // Insert the tag at the end of the results
              data.push(tag);
            }
          }).val('test2').trigger('change');
         
         
          $('#inviteselectelement1').select2({
            tags: true,
            data: data_select21,
            placeholder: 'Select Invites',
            escapeMarkup: function (markup) {
              return markup;
            },
            templateResult: function (d) {
              return '<span>' + d.text + '</span><span class="pull-right subtext">' + d.subText + '</span>';
            },
            templateSelection: function (d) {
              return d.text + ' ( ' + d.subText + ')';
            },
            insertTag: function (data, tag) {
              // Insert the tag at the end of the results
              data.push(tag);
            }
          }).val('test2').trigger('change');
       
       
          // inviteselectelement.appendChild(name)

    }else if(change.type === "modified"){
         // on modify no related code
    }else if (change.type === "removed") {
        // on remove no related code
    }
});

});

thank you