title: Write new select2 option tags to local database in express
body: <p>I am using <a href="https://select2.org" rel="nofollow noreferrer">select2</a> in an express app to make an input box where users can select subjects from a list, <strong>and can update this list with any newly added options</strong>.</p>
  
  <p>The thing I'm struggling with is that <code>select2</code> runs client-side, whereas any data I use to seed my <code>&lt;option&gt;</code> tags (that I want to append new options to) is server-side.</p>
  
  <p>I want users to be able to add subjects that don't exist in the original list, <strong>so that future users will be presented with newly added options (as well as the original ones)</strong></p>
  
  <p>These are the options I've considered for achieving this (in increasing desirability):</p>
  
  <ul>
  <li>Add new <code>&lt;option&gt;Subject&lt;/option&gt;</code> html tags for each added tag</li>
  <li>Push new tags to an array, and seed the <code>&lt;option&gt;</code>s from this array</li>
  <li>Seed the <code>&lt;option&gt;</code> from a <code>json</code> object, and update this object on tag creation</li>
  <li>Seed the <code>&lt;option&gt;</code> from an external database (e.g. mongoose), and update this on tag creation</li>
  </ul>
  
  <p>As far as I can see, all of these options require that my client-side code (<code>select2-js</code>) talks to server-side code (where my array, <code>.json</code> file or <code>mongoose</code> schema would be), and <strong>I have no idea how to go about doing this</strong>. </p>
  
  <p>In my current approach I am attempting to to specify a "local" <code>json</code> file as my data source in my <code>select2</code> call (<a href="https://select2.org/data-sources/ajax" rel="nofollow noreferrer">see here</a>). However, this doesn't seed the database with any options, so this isn't working as I expected. </p>
  
  <p>I then check if each new tag exists in an array (<code>dataBase</code>), and add it to the database if not:  </p>
  
  <pre><code>// Data to seed initial tags:
  var dataBase = [
      { id: 0, text: 'Maths'},
      { id: 1, text: 'English'},
      { id: 2, text: 'Biology'},
      { id: 3, text: 'Chemistry'},
      { id: 4, text: 'Geography'}
  ];
  
  
  $(document).ready(function() {
      $('.select2-container').select2({
          ajax: {
              url: '../../subjects.json',
              dataType: 'json',
          },
          width: 'style',
          multiple: true,
          tags: true,
          createTag: function (tag) {
              var isNew = false;
              tag.term = tag.term.toLowerCase();
              console.log(tag.term);
              if(!search(tag.term, dataBase)){
                  if(confirm("Are you sure you want to add this tag:" + tag.term)){
                      dataBase.push({id:dataBase.length+1, text: tag.term});
                      isNew = true;
                  }
              }
              return {
                          id: tag.term,
                          text: tag.term,
                          isNew : isNew
                      };
          },
          tokenSeparators: [',', '.']
      })
  });
  
  // Is tag in database?
  function search(nameKey, myArray){
      for (var i=0; i &lt; myArray.length; i++) {
          if (myArray[i].text.toLowerCase() === nameKey.toLowerCase()) {
              return true
          }
      }
      return false
  };
  </code></pre>
  
  <p>However, this approach will add the new tags to an array that is destroyed once I refresh the page, and new tags are not stored.</p>
  
  <p><strong>How can I modify this to load server-side data (<code>json</code>, <code>mongoose</code> document or anything else that is considered a best practice), and update this data with newly added options (that pass my tests)?</strong></p>