JSFiddle - React, Tailwind, and code Playground

by CJ Ramki

HTML

<div id="filterpanel">
    <div id="f1" class="fdivs">JOB ROLE1</div>
    <div id="f2" class="fdivs">JOB ROLE2</div>
    <div id="f3" class="fdivs">JOB ROLE3</div>
    <div id="f4" class="fdivs">JOB ROLE4</div>
    <div id="f5" class="fdivs">JOB ROLE5</div>
</div>
<input type="button" id="but1" value="But1" class="btn" />
<input type="button" id="but2" value="But2" class="btn" />
<input type="button" id="but3" value="But3" class="btn" />
<input type="button" id="but4" value="But4" class="btn" />
<input type="button" id="but5" value="But5" class="btn" />
<input type="button" id="reset" value="reset" />

CSS

.fdivs {
    width: 15%;
    height: 98%;
    position: relative;
    left: 1%;
    background-color: #000;
    float: left;
    color: whitesmoke;
    text-align: center;
    border-radius: 16px;
    margin: 0.5%;
    display: none;
    font-size: 12px;
}
#filterpanel {
    position: absolute;
    top: 50%;
    left: 0;
    width: 99%;
    height: 10%;
    background-color: azure;
    border: 4px solid black;
    border-radius: 12px;
    overflow-x: scroll;
    white-space: nowrap;
}

JavaScript

$(document).ready(function () {
    $('.btn').click(function () {
        var clicked = $(this).attr('id');
        var clicked_id = clicked.substr(clicked.length - 1);
         $('#f'+clicked_id).detach().appendTo('#filterpanel').show();
    });

    $("#reset").click(function () {
        $("#f1,#f2,#f3,#f4,#f5").hide();
    });
});