JSFiddle - React, Tailwind, and code Playground

by Ersin Bilgin

HTML

<select name="test" id="test" class="customSelect">
    <option value="1">test 1</option>
    <option value="2">test 2</option>
    <option value="3">test 3</option>
    <option value="4">test 4</option>
    <option value="5">test 5</option>
</select>

<button class="toggle">Göster/Gizle</button>

JavaScript

var select = $(".customSelect");

$.each( select, function ( si, ss ) {

    var html = "";
    
    $.each( $(ss).find("option"), function ( i, s ) {

        html += "<li data-value='" + $(s).attr("value") + "'>" + $(s).text() + "</li>";
        
    });
    
    $(ss).after("<div id='" + select.attr("id") + "CustomSelect'><ul>" + html + "</ul></div>");
    
    $(ss).next().find("li").on( 'click', function () {
    
        $(this).closest("div").prev().val( $(this).attr("data-value") );
        
    });

});

$(".toggle").on( 'click', function () {

    $(".customSelect").toggle()

});