JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div class="rbWwSearchBlock">
         <div class="rbCategoryList" id="rbCategoriesPickList">
            <a href="javascript://" id="rbCatTopManagement">Топ-менеджмент, руководители</a>
            <a href="javascript://" id="rbCatAutomoto">Автомобильный бизнес</a>
            <a href="javascript://" id="rbCatAdministrative">Административный персонал</a>
            <a href="javascript://" id="rbCatBank">Банки, страхование, лизинг</a>
            <a href="javascript://" id="rbCatSafety">Безопасность, охрана</a>
            <a href="javascript://" id="rbCatAccountant">Бухгалтерия, финансы, экономика предприятия</a>
            <a href="javascript://" id="rbCatGovernment">Государственная служба, некоммерческие организации</a>
            <a href="javascript://" id="rbCatDesign">Дизайн, искусство, развлечения</a>
            <a href="javascript://" id="rbCatHome">Домашний персонал, обслуживание</a>
            <a href="javascript://" id="rbCatProcurement">Закупки, поставки, ВЭД</a>
            <a href="javascript://" id="rbCatInternet">Интернет, IT, телеком, связь</a>
            <a href="javascript://" id="rbCatLogistic">Логистика, транспорт, склад</a>
            <a href="javascript://" id="rbCatMarketing">Маркетинг, реклама, PR</a>
            <a href="javascript://" id="rbCatMedical">Медицина, фармацевтика</a>
            <a href="javascript://" id="rbCatEducation">Наука, образование, консалтинг</a>
            <a href="javascript://" id="rbCatHr">Отдел кадров, HR, обучение персонала</a>
            <a href="javascript://" id="rbCatParttime">Подработка, сезонная работа</a>
            <a href="javascript://" id="rbCatSales">Продажи</a>
            <a href="javascript://" id="rbCatFactory">Промышленность, сельское хозяйство</a>
            <a href="javascript://" id="rbCatTeens">Работа для молодежи</a>
            <a href="javascript://" id="rbCatWorkers">Рабочий персонал,...

CSS

.rbWwSearchBlock {
    width: 100%;
    display: block;
    margin: 10px 0;
    background-color: pink;
}
.rbWwSearchBlock:after {
    display: block;
    content:'';
    clear: both;
}
#rbSearchCategories {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #fff url(../img/iconsearch.png) no-repeat 6px center;
    border: 1px solid ccc;
    border-radius: 4px;
    padding: 0 5px 0 33px;
}
.rbCategoryList, .rbSubcategoryList {
    width:50%;
    height: 300px;
    overflow: auto;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    float: left;
    border: 1px solid #ccc;
    display: block;
    background-color: #fff;
}
.rbSubcategoryList {
    border-left: 0;
    line-height: 1.5;
}
.rbCategoryList a {
    display:block;
    padding:5px 0 5px 5px;
    text-decoration:none;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.rbCategoryList a:hover {
    background-color:#444;
    color:#fff;
}
/* Picked categories block */
 .rbWwCatPicked {
    width: 100%;
    display: block;
    background-color: #eee;
    padding: 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.rbWwCatPicked .rbPickedCategory {
    padding: 8px 10px;
    background-color: orange;
    color: #000;
    display: inline-block;
    margin-right: 15px;
}
.rbWwCatPicked .rbPickedCategory .rbPcCat {
    font-weight: bold;
    margin-bottom: 5px;
}
.rbWwCatPicked .rbPickedCategory .rbPcSubCat {
    padding-left: 10px;
}

JavaScript

// This script is to work with categories in Resume Builder
// Author: Alex Chizhov
// Version: 1.5
// Date: 21.07.2014

jQuery(function ($) {

   // Default color for chosen category
   var categoryColor = 'orange';

   // Block to display subcategories in
   var subcategoryList = '.rbSubcategoryList';

   // Count added blocks with categories and subcategories
   var countShownCats = $('div.rbSubcategoryList div.rbPickedCategory').size();
   var countIndexCat = $('div.rbSubcategoryList div.rbPickedCategory').size() + 1;

   // Colorize chosen category and empty previous
   $('.rbCategoryList a').click(function (e) {
      e.preventDefault();
      $(this).css('background-color', categoryColor);
      $('.rbCategoryList a').not(this).css('background-color', '');
      $(subcategoryList).empty();

      var rbCatId = $(this).prop('id');

      var rbArrayVariable = '';
      if (rbCatId == 'rbCatTopManagement') { rbArrayVariable = ["Автомобильный бизнес", "Администритивное управление", "Банки, страхование, лизинг", "Безопасность, охрана", "Дизайн, искусство, развлечения, СМИ", "Закупки, поставки, ВЭД", "Интернет, IT, телеком, связь", "Консультирование", "Логистика, транспорт, склад", "Маркетинг, реклама, PR", "Медицина, фармацевтика", "Наука, образование, консалтинг", "Продажи", "Производство, промышленность", "Спорт, фитнес, салоны красоты", "Строительство, недвижимость", "Топ-менеджмент", "Туризм, гостиницы, рестораны", "Управление малым бизнесом", "Управление персоналом, HR, тренинги", "Финансы", "Юриспруденция"]; }
      if (rbCatId == 'rbCatAutomoto') { rbArrayVariable = ["Автожестянщик", "Автозапчасти", "Автомойщик", "Автосалоны", "Автослесарь", "Продажа", "Производство", "Прокат, лизинг", "Сервисное обслуживание", "Тонировщик", "Шины, диски"]; }
      if (rbCatId == 'rbCatAdministrative') { rbArrayVariable = ["Архивист", "АХО", "Водитель", "Делопроизводство", "Курьер", "Оператор ПК", "Перевод письменный", "Перевод последовательный", "Перевод синхронный",...