JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div id="mades">
     <h3>Выбарите марку авто</h3> 
    <input type="hidden" value="1" name='made'> <span data-value="1" class='selected'>ВСЕ</span>
 <span data-value="2">ALFA ROMEO</span>
 <span data-value="3">AUDI</a></span>
 <span data-value="4">BMW</span>
 <span data-value="5">CHERY</span>
 <span data-value="6">CHEVROLET</span>
 <span data-value="7">CHRYSLER</span>
 <span data-value="8">CITROEN</span>

</div>
<br>
<div id="part">
     <h3>Выбарите марку авто</h3> 
    <input type="hidden" value="1" name='made'> <span data-value="0" selected="">Все</span>
 <span data-value="1">Втулка стабилизатора</span>
 <span data-value="2">Опора амортизатора</span>
 <span data-value="3">Опора двигателя</span>
 <span data-value="4">Рулевая тяга</span>
 <span data-value="5">Рулевой наконечник /Наконечник рулевой тяги</span>
 <span data-value="6">Рычаг подвески</span>
 <span data-value="7">Сайлентблок</span>
 <span data-value="8">Тяга стабилизатора</span>
 <span data-value="9">Чехол защитный</span>
 <span data-value="10">Шаровая опора</span>
 <span data-value="11">Втулка амортизатора</span>
 <span data-value="12">Ролики</span>
 <span data-value="13">Втулки прочее</span>
 <span data-value="14">Прочее</span>

</div>

CSS

* {
    padding:0;
    margin:0;
}
body {
    font-family:Calibri;
}
#mades span, #part span {
    cursor:pointer;
    padding:5px 8px;
    float:left;
    background:#666;
    color:#FFF;
    margin:0 5px 5px 0;
}
.selected {
    background:black!Important;
}

JavaScript

$('#mades span, #part span').click(function () {
    var val_attr = $(this).attr('data-value');
    $(this).addClass('selected');
    $('#mades input').val(val_attr);
    $(this).siblings().removeClass('selected');
});