JSFiddle - React, Tailwind, and code Playground

by Manivasagam M

HTML

<div>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple"
    style="height: 315px;width:200px" onchange="Move()">
    <option>Lesson</option>
    <option>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>
<h1>I want to display like below if added items.
<div>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple"
    style="height: 315px;width:200px" onchange="Move()">
    <option>Lesson</option>
    <option disabled>about myself</option>
    <option disabled>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()">
    <option>Lesson</option>
    <option>about myself</option>
    <option>about yourself</option>
</select>
</div>
<input type="hidden" name="moveforzero" id="moveforzero" value="0">

JavaScript

var $options = $('#SelectFeatures option,#SelectedFeatures 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);
    }
});

 $('#moveforzero').val("0");

$('#SelectFeatures').delegate('option:selected', 'click',function(){ 
		    
		            var oSrc = document.getElementById('SelectFeatures');
		 
		            var oDest = document.getElementById('SelectedFeatures');

		            var zero = document.getElementsByName('moveforzero')[0].value;
		         
		           
		            for (var i = 0; i < oSrc.options.length; i++) {
		               
		                var j=parseInt(zero);
		               
		                if (oSrc.options[i].selected == true) {
		                   
		                    oSrc.options[i].disabled=true;
		                    var NewOption = new Option();
		                    //var selected = oSrc.options[i].value;
		                    NewOption.text = oSrc.options[oSrc.options.selectedIndex].text;
		                    NewOption.value = oSrc.options[oSrc.options.selectedIndex].value;
		                  
		                  
		                    oDest.options[i] = NewOption;
		                   
		                   
		                   

		                    document.getElementsByName('moveforzero')[0].value=j+1;
		                   
		                   
		                   
		                }   
		            }
		            $('#SelectFeatures').find('option:selected').removeAttr('selected');
		           
		        });


		$('#SelectedFeatures').delegate('option:selected', 'click',function(){ 
		           
		        var d,f;
		        var minuone=document.getElementsByName('moveforzero')[0].value;
		        
		       ...