how to add option with its optgroup using jquery? -

i have created code add , remove option select boxs.its working fine want add option it's optgroup text , remove optgroup.here fiddle http://jsfiddle.net/manivasagam/8ybf7nke/22/

my jsp :

<div> <select name="selectfeatures" id="selectfeatures" multiple="multiple"     style="height: 315px;width:200px" onchange="move()">     <option>lesson</option>     <option value="about myself">about myself</option>     <option>about yourself</option>     <option>game</option>     <option>about me game</option>     <option>worksheet</option>     <option>content</option>     <option>content2</option> </select> <select name="selectedfeatures" id="selectedfeatures" multiple="multiple"     style="height: 315px;width:200px" onchange="move()">  </select> </div>  

i creating optgroup dynamically using below code,

var $options = $('#selectfeatures option');

var $group = null; $options.each(function(){     var $option = $(this);     var text = $option.text();     if (text === 'lesson' || text === 'game' || text == 'worksheet')     {         $group = $('<optgroup label="' + text + '"/>');         $option.replacewith($group);     }     else     {         $group.append($option);     } }); 

someone tell me how add , remove optgroup?

the idea copy <optgroup>s , <option>s second <select> , show selected options in it, hiding others.

all selected options can chosen selecting visible options.

fiddle

html:

<select name="selectfeatures" id="selectfeatures" multiple="multiple">     <optgroup label="lesson">         <option>about myself</option>         <option>about yourself</option>     </optgroup>     <optgroup label="game">         <option>about game</option>     </optgroup>     <optgroup label="worksheet">         <option>content</option>         <option>content2</option>     </optgroup> </select>  <select name="selectedfeatures" id="selectedfeatures" multiple="multiple"> </select> 

js:

$(document).ready(function() {     $('#selectfeatures optgroup').clone().hide().appendto('#selectedfeatures');     $('#selectedfeatures option').hide();      $('#selectfeatures').on('click', 'option', function()     {         var thistext = $(this).text();         this.disabled = true;         var thisgroup = $(this).parent();         var targetgroup = $('#selectedfeatures optgroup[label="' + thisgroup.attr('label') + '"]');         targetgroup.show();         targetgroup.find('option').filter(function() { return $(this).text() == thistext; }).show();     });      $('#selectedfeatures').on('click', 'option', function()     {         var thistext = $(this).text();         $(this).hide();         $('#selectfeatures option').filter(function() { return $(this).text() == thistext; }).prop('disabled', false);         var thisgroup = $(this).parent();                 if (thisgroup.find('option:visible').length == 0)         {             thisgroup.hide();         }     }); }); 

version options deletion:

fiddle.

js:

$(document).ready(function() {         $('#selectfeatures').on('click', 'option', function()     {         var thistext = $(this).text();         var thisgroup = $(this).parent();         var targetgroup = $('#selectedfeatures optgroup[label="' + thisgroup.attr('label') + '"]');         if (targetgroup.length == 0)         {             targetgroup = thisgroup.clone();             targetgroup.find('option').remove();             var nextgroupstext = thisgroup.nextall().map(function() { return $(this).attr('label'); }).get();             var inserted = false;             $('#selectedfeatures optgroup').each(function()             {                 if ($.inarray($(this).attr('label'), nextgroupstext) > -1)                 {                     targetgroup.insertbefore(this);                     inserted = true;                     return false;                 }             });             if (!inserted)             {                 $('#selectedfeatures').append(targetgroup);             }         }         targetgroup.append($(this).clone());         this.disabled = true;     });      $('#selectedfeatures').on('click', 'option', function()     {         var thistext = $(this).text();         $('#selectfeatures option').filter(function() { return $(this).text() == thistext; }).prop('disabled', false);         var thisgroup = $(this).parent();         $(this).remove();         if (thisgroup.find('option').length == 0)         {             thisgroup.remove();         }     }); });