title: SELECT2 -> Add data without replacing content
body: <p>I've had a look at some other threads but nothing quite as specific. It's not really something that I would assume is hard but I'm not sure how about to do it.</p>
  
  <p>Currently I'm using Select2 for a tagging system and next to it I have suggested tags which users would be able to click on and it will add to the box.</p>
  
  <p>Instead, each tag is replacing the content and adding itself.</p>
  
  <p>I need the adding to be appended into the box without replacing what's already in there.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>$(document).on('click', ".tag1", function () {
        var value = $(".tag1").html();
        console.log(value);
        $("#selectPretty").val([value]).trigger("change");
  });
  $(document).on('click', ".tag2", function () {
        var value = $(".tag2").html();
        console.log(value);
        $("#selectPretty").val([value]).trigger("change");
  });
  </code></pre>
  
  <p>The data is being pulled through via AJAX with a span around each suggested tag.</p>
  
  <p>Hope I'm clear enough.</p>
  
  <p><img src="https://i.stack.imgur.com/NL6o4.png" alt=""></p>
  
  <p>Summary: I want to be able to click on each 'tag' and for it to be added, instead it replaces what was already in the box.</p>
  
  <p>Thanks</p>