Dynamically add options to ChosenJS selection field but avoid adding duplicates

Question

I am using the Chosen JS library to convert a HTML Selection form filed into a Tag input field.

I then need to allow my application to dynamically add new Tag selection options.

I was able to achieve this goal with my demo code below and on this COdePen.io demo http://codepen.io/jasondavis/pen/VLMzxG?editors=101

What I need help with is that when you click the demo buttons to insert new tag options, it allows you to repeatedly keep adding duplicate options.

I would like to modify my addTagSelectionOptions(tagName) function so that it will first check to make sure the tag is not already in the selection list.

$( document ).ready(function() {

  // init ChosenJS on Tag input field
  $('#task-tags-input').chosen({
    no_results_text:'Oops, nothing found!',
    width:"95%"
  });

  // Add new Tag options to Selection field
  function addTagSelectionOptions(tagName){
    var $taskTagsInpuitEl = $('#task-tags-input');
    // add new Tag selection options 
    $taskTagsInpuitEl.append('<option value="'+tagName+'">'+tagName+'</option>');

    // trigger Chosen to update after adding new options so that they show up!
    $taskTagsInpuitEl.trigger("chosen:updated");     
  }

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-1').on('click', function() {
    addTagSelectionOptions('PHP');
    addTagSelectionOptions('JavaScript');
  });

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-2').on('click', function() {
    addTagSelectionOptions('MySQL');
    addTagSelectionOptions('Oracle');
  });  

  // Add new Tag selection options when button clicked
  $('#add-tags-btn-3').on('click', function() {
    addTagSelectionOptions('CSS');
    addTagSelectionOptions('HTML');
  });
});

Answer 1

You can check the option value before append which is presented or not

if (!$taskTagsInpuitEl.find("option[value" + tagName + "]").length) {
      $taskTagsInpuitEl.append('<option value="' + tagName + '">' + tagName + '</option>')

    }

DEMO