JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="select" name="Какой металлопрокат: ">
    <div class="form-holder">
        <div id="namediv" name="userName" class="select-control required">АРМАТУРА</div>
        <input type="hidden" name="Вид_металлопроката" value="АРМАТУРА" />
        <i class="zmdi fa fa-angle-down"></i>
    </div>
    <ul id="vybor-met" class="dropdown">
        <li data-id='1' rel="АРМАТУРА" value="АРМАТУРА" name="Металлопрокат: ">АРМАТУРА</li>
        <li data-id='2' rel="ТРУБЫ КРУГЛЫЕ" value="ТРУБЫ КРУГЛЫЕ" name="Металлопрокат: ">ТРУБЫ КРУГЛЫЕ</li>
            <li data-id='3' rel="ТРУБЫ ПРОФИЛЬНЫЕ" value="ТРУБЫ ПРОФИЛЬНЫЕ" name="Металлопрокат: ">ТРУБЫ ПРОФИЛЬНЫЕ</li>
        <li data-id='4' rel="ЛИСТОВОЙ ПРОКАТ" value="ЛИСТОВОЙ ПРОКАТ" name="Металлопрокат: ">ЛИСТОВОЙ ПРОКАТ</li>
        <li data-id='5' rel="БАЛКА ДВУТАВРОВАЯ" value="БАЛКА ДВУТАВРОВАЯ" name="Металлопрокат: ">БАЛКА ДВУТАВРОВАЯ</li>
            <li data-id='6' rel="ШВЕЛЛЕР" value="ШВЕЛЛЕР" name="Металлопрокат:">ШВЕЛЛЕР</li>
        <li data-id='7' rel="ПОЛОСА" value="ПОЛОСА" name="Металлопрокат: ">ПОЛОСА</li>
            <li data-id='8' rel="КРУГ" value="КРУГ" name="Металлопрокат: ">КРУГ</li>
            <li data-id='9' rel="КАТАНКА" value="КАТАНКА" name="Металлопрокат:">КАТАНКА</li>
        <li data-id='10' rel="КВАДРАТ" value="КВАДРАТ" name="Металлопрокат:">КВАДРАТ</li>
        <li data-id='11' rel="ШЕСТИГРАННИК" value="ШЕСТИГРАННИК" name="Металлопрокат:">ШЕСТИГРАННИК</li>
        <li data-id='12' rel="ШТРИПС" value="ШТРИПС" name="Металлопрокат:">ШТРИПС</li>
            <li data-id='13' rel="ПОКОВКА" value="ПОКОВКА" name="Металлопрокат:">ПОКОВКА</li>
    </ul>
</div>

JavaScript

$(document).ready(function (){
    $('#vybor-met > li').click(function (){
        $('#marka-tip > div').hide();
        var i=$(this).data('id');
        $('#d'+i).fadeIn();
    });
});