JSFiddle - React, Tailwind, and code Playground

HTML

Lecturers:<br>
<select id="lecturers" size="4" style="width:200px;height:200px">
    <option value="3;B;A">A, B</option>
    <option value="5;D;C">C, D</option>
</select>

<select id="selected_lecturers" size="4" style="width:200px;height:200px">
    <option value="1;F;E">E, F</option>
    <option value="4;H;G">G, H</option>
    <option value="2;J;I">I, J</option>
</select>

CSS

div {
    display: inline;
    height: 200px;
}

JavaScript

$("#lecturers option").dblclick(function () 
	{
		var element = $("#lecturers option:selected");
		var value = element.val();
		element.remove();
		var values = value.split(";")
		
		$("#selected_lecturers").append('<option value="' + value + '">' + values[2] + ', ' + values[1] + '</option>');
		
	});
	
	$("#selected_lecturers option").dblclick(function () 
	{
		var element = $("#selected_lecturers option:selected");
		var value = element.val();
		element.remove();
		var values = value.split(";")
		
		$("#lecturers").append('<option value="' + value + '">' + values[2] + ', ' + values[1] + '</option>');
		
	});