JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
			<h1>Список сотрудников</h1>
			
			<div class="list">
				<div class="employees">
					<h2>Сотрудники</h2>
					<ul id="full-list">
					</ul>
				</div>
				
				<div class="selected">
					<h2>Выбранные сотрудники</h2>
					<ul id="seleced-list">
						
					</ul>
				</div>
			</div>
			
			<div class="task">	
				<h2>Задание:</h2>
				<ol>
					<li>- Сотрудники в обоих списках отсортированы по алфавиту.</li>
					<li>- При выборе сотрудника из левого списка, он перемещяется в правый. При снятии галочки - снова в левый.</li>
					<li>- Все перемещения осуществляются с сохранением сортировки по алфавиту</li>
					<li>- Сотрудника можно выбрать как становкой галочки, так и по клику по ФИО сотрудника.</li>
				</ol>
			</div>
		</div>

CSS

*{margin:0;padding:0;}
img {border:0;}
html,textarea,input {font:normal 14px Tahona,Arial,sans-serif;}
a {text-decoration:none;color:#e233b1;}
a:hover {text-decoration:underline;}
li {display:block;list-style:none;}
h2 {font-size:16px;}
h3 {font-size:14px;}
::selection {background:#3567F0;color:#fff;}
.clear {clear:both;}
table {width:100%;border-collapse:collapse;}

.wrapper {
width:900px;
padding:20px;
margin:40px auto 0;
border:1px solid #000;
}

.list {
margin:35px 0 45px;
}

.list li {
font-size:12px;
margin-bottom:15px;
}

.list li input[type="checkbox"] {
margin-right:5px;
background:#fff;
border:1px solid #000;
}

.list li input,
.list li label {
vertical-align:middle;
}

.list .employees,
.list .selected {
display:inline-block;*display:inline;zoom:1;
width:45%;
}

.list .employees {
margin-right:50px;
}

.list .employees ul,
.list .selected ul {
height:311px;
padding:9px 10px;
margin-top:3px;
overflow-y:auto;
border:1px solid #000;
}

.task {
border-top:1px solid #000;
padding-top:20px;
}

.task li {
font-style:italic;
margin:13px 0;
}

JavaScript

// Массив с именами сотрудников получаем его и генерируем, например, из базы средствами PHP
	var employees = ['Абельцев Сергей','Абрамов Виктор','Аксаков Анатолий','Алфёров Жорес','Свердлов Юрий','Свечников Пётр','Свистунов Аркадий','Свищев Дмитрий','Селезнёв Валерий','Амирилаев Адам','Андреев Андрей','Аникеев Григорий','Антонов Виктор','Пономарёв Алексей','Яковлева Лариса','Яковлева Татьяна','Янаков Эдуард','Яровая Ирина','Пономарев Илья','Попов Александр','Попов Сергей','Белоконев Сергей','Беляков Антон','Берестов Александр','Берхеев Ильдар','Бесчётнов Константин','Харитонов Николай','Хахичев Владимир','Хесин Михаил','Хинштейн Александр','Бобровская Ольга','Бобырев Валентин','Богомолов Валерий','Волчек Денис','Воробьёв Андрей','Воронова Татьяна','Горбачёв Владимир','Горькова Ирина','Горячева Раиса','Горячева Светлана','Гостев Руслан','Грачёв Иван','Денисов Валентин','Дмитриева Оксана','Драганов Валерий','Драпеко Елена','Друсинов Валентин','Коваль Александр','Коган Александр','Коган Юрий','Козерадский Анатолий'];

	// Массив, в котором будут Выбранные работники
	var seleced_employees = [];

	// Предопределяем нужные переменные
	var li,list_selected,deleted;


	// После загрузки дома
	//document.addEventListener('DOMContentLoaded', function() {

		var list_full = document.getElementById('full-list');

		// Сортируем массив с сотрудниками и генерируем html
		employees.sort();

		for(var i = 0; i < employees.length; i++)
		{
			// Новый элемент
			li = document.createElement('LI');
			li.id = "cell-" +i;
			li.setAttribute('data-id', 0);
			li.onclick = transfer;
			li.innerHTML = "<input type=\"checkbox\" name=\"employee[]\" id=\"employee-"+ i +"\" /> <label for=\"employee-"+ i +"\">"+ employees[i] +"</label>";

			// Добавляем в конец
			list_full.appendChild(li);
		}
	//});


	// Обработка клика по <li>
	// type 0 - перенос Полный список -> Выбранные
	// type 1 - перенос Полный список <- Выбранные
	function transfer()
	{
		// Получим тип трансфера
		type =...