javascript - Dynamically add options to ChosenJS selection field but avoid ading duplicates -

i using chosen js library convert html selection form filed tag input field.

i need allow application dynamically add new tag selection options.

i able achieve goal demo code below , on codepen.io demo http://codepen.io/jasondavis/pen/vlmzxg?editors=101

what need when click demo buittons insert new tag options, allows repeatedly keep adding duplicate options.

i modify addtagselectionoptions(tagname) function first check make sure tag not in selection list.

any please?

$( 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 selection field   function addtagselectionoptions(tagname){     var $tasktagsinpuitel = $('#task-tags-input');     // add new tag selection options      $tasktagsinpuitel.append('<option value="'+tagname+'">'+tagname+'</option>');      // trigger chosen update after adding new options 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');   });     }); 

you can check option value before append presented or not

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

demo