title: Add dynamic option inside optgroup to a select2
body: <p>I've a select2 like this:</p>
  
  <pre><code>&lt;select id="example"&gt;
     &lt;option value=""&gt; - &lt;/option&gt;
      &lt;optgroup label="Private folders"&gt;
        &lt;option value="1"&gt;Folder 1 private&lt;/option&gt;
        &lt;option value="2"&gt;Folder 2 private&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Public folders"&gt;
        &lt;option value="3"&gt;Folder 1 public&lt;/option&gt;
        &lt;option value="4"&gt;Folder 2 public&lt;/option&gt;
      &lt;/optgroup&gt;  
  &lt;/select&gt;
  </code></pre>
  
  <p>I use select2 plugin to add new foldels dynamically if needed.
  I need to insert new folders inside optgroup "Private folders".</p>
  
  <pre><code>$('#example').select2({
      tags: true,
      createTag: function (params) {
          return {
              id: params.term,
              text: params.term,
              newOption: true
          }
      },
      templateResult: function (data) {
        var $result = $("&lt;span&gt;&lt;/span&gt;");
        $result.text(data.text);
  
          if (data.newOption) {
                $result.append(" &lt;em&gt;(new)&lt;/em&gt;");
          }
  
          return $result;
       }
  }).on('select2:select', function (e) {
  
          var data = e.params.data;
  
          var text = data.text;
  
          if (data.newOption) {
  
            if ( $('#example optgroup[label="Private folders"]').length &gt; 0 ) {
  
                 var option = $("&lt;option&gt;&lt;/option&gt;");     
                 option.val(data.ID);
                 option.text(text);
                 $('#example optgroup[label="Private folders"]').append(option);
                 $('#example').val(data.ID).trigger('change');
  
            } else {
  
                  var optgroup = $('&lt;optgroup&gt;');
                  optgroup.attr('label',"Private folders");
                  var option = $("&lt;option&gt;&lt;/option&gt;");
                  option.val(data.ID);
                  option.text(text);
                  optgroup.append(option);
                  $('#example').append(optgroup);
                  $('#example').val(data.ID).trigger('change');
  
          }
  
   }
  
  });
  </code></pre>
  
  <p>So for example if I write "New folder", i need to append it inside <code>optgroup</code> with <code>label="Private folders"</code>.</p>
  
  <p>My script works only if optgroup "Private folders" doesn't exist. If it already exists, nothing appened.</p>
  
  <p>See my fiddle: <a href="https://jsfiddle.net/rLmztr2d/4054/" rel="nofollow noreferrer">https://jsfiddle.net/rLmztr2d/4054/</a></p>
  
  <p>First new insert works. Others new insert doesn't work...</p>