JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search-container">
    <div id="prev-search-container" class="history-search-container inactive">
        <input type="text" id="prev-search" name="prevSearch" value=""
               class="history-search"/>
    </div>
    <div id="search-search-container" class="active-search-container">
        <input type="text" id="search" name="Search" value=""
               placeholder="Enter search..." class="history-search"/>
    </div>
    <div id="next-search-container" class="history-search-container inactive">
        <input type="text" id="next-search" name="nextSearch" value=""
               class="history-search"/>
    </div>
</form>
<div id="search-history" style="display: none;">
    <ul id="search-history-list"/>
</div>

CSS

input {
    border: none;
}

#search-container {
    width: 350px;
    height: 18px;
    border: 1px solid #000;
    padding: 0;
}

.history-search {
    float: left;
    margin: 0;
    padding: 0;
}

.active-search-container,
.active-search-contaner > .history-search {
    width: 300px;
}

.history-search-container,
.active-search-container {
    float: left;
    border-style: solid;
    border-color: #000;
    margin: 0;
    padding: 0;
}

.history-search-container,
.history-search-container > .history-search {
    width: 24px;
}

div[class*="sharehover"],
div[class*="sharehover"] > .history-search {
    width: 162px;
}

.history-search-container:not(:hover) > .history-search {
    background-color: #0C0;
}

.history-search-container[class*="nodata"] > .history-search {
    background-color: #DDD;
}

#search-container > div:not(:last-child) {
    border-width: 0 1px 0 0;
}
#search-container > div:last-child {
    border-width: 0;
}
#search-history {
    width: 350px;
    float: left;
}
#search-history-list:not(:empty) {
    border-style: solid;
    border-color: #000;
    border-width: 0 1px 1px;
    width: 162px;
}
#search-history-list > li {
    border-style: solid;
    border-color: #000;
}
#search-history-list > li:not(:last-child) {
    border-width: 0 0 1px 0;
}
#search-history-list > li:last-child {
    border-width: 0;
}

JavaScript

var historySearch = {
    past: [
        "alpha",
        "bravo",
        "charlie",
        "delta"
    ],
    future: [
        "echo",
        "foxtrot",
        "golf",
        "hotel",
        "india"
    ]
};

function setNoData() {
    if (!historySearch.past.length) {
        $('#prev-search-container, #prev-search').addClass('nodata');
    } else {
        $('#prev-search-container, #prev-search').removeClass('nodata');
    }
    if (!historySearch.future.length) {
        $('#next-search-container, #next-search').addClass('nodata');
    } else {
        $('#next-search-container, #next-search').removeClass('nodata');
    }
}

function jumpToItem() {
    var activated = $(this);
    var parent = $(activated).closest('.history-search-container');
    var parentId = $(parent).attr('id');
    var index = $(activated).index();
    var search = $('#search');
    var oldSearch = $(search).attr('value');
    var newSearch = '';
    if (parentId == 'prev-search-container') {
        index = (index * -1) - 1;
        if (oldSearch.length) {
            historySearch.future.unshift(oldSearch);
        }
        historySearch.future = historySearch.past.splice(index).concat(
            historySearch.future);
        newSearch = historySearch.past.pop();
    } else if (parentId == 'next-search-container') {
        index += 1;
        var tmpArray = [];
        if (oldSearch.length) {
            tmpArray.push(oldSearch);
        }
        tmpArray = tmpArray.concat(historySearch.future.splice(0, index));
        historySearch.past = historySearch.past.concat(tmpArray);
        newSearch = historySearch.future.shift();
    }
    $(search).attr('value', newSearch);
    $(parent).mouseleave();
    $(search).focus();
    setNoData();
}

function searchHistoryOn(aAttach, aList) {
    var searchHistory = $('#search-history-list');
    $(searchHistory).empty();
    for (var i = 0; i < aList.length; i += 1) {
        $(searchHistory).append('<li>' + aList[i] +...