JSFiddle - React, Tailwind, and code Playground

by JustUsAgency

HTML

<ul class="clearfix"><li class="et_pb_portfolio_filter et_pb_portfolio_filter_all"><a href="#" class="active" data-category-slug="all">All</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="accounting-software">Accounting Software</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="audit-assurance">Audit &amp; Assurance</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="auto-enrolment">Auto Enrolment</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="business-accounting">Business Accounting</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="business-advice">Business Advice</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="business-start-up">Business Start-Up</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="business-tax">Business Tax</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="charity-company-law-advice-constitutions-governance">Charity &amp; Company Law Advice, Constitutions &amp; Governance</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="charity-accounting-reporting">Charity Accounting &amp; Reporting</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="company-accounting">Company Accounting</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="corporate-tax">Corporate Tax</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="information-it-systems">Information &amp; IT Systems</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="inheritance-tax-planning">Inheritance Tax Planning</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="management-accounting">Management Accounting</a></li><li class="et_pb_portfolio_filter"><a href="#" data-category-slug="payroll">Payroll</a></li><li class="et_pb_portfolio_filter"><a href="#"...

JavaScript

$(function() {
    $('ul.clearfix').each(function() {
        var $select = $('<select />');

        $(this).find('a').each(function() {
            var $option = $('<option />');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
    });