JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="collapsible" data-theme="d" data-collapsed-icon="search" data-expanded-icon="search" class="ui-icon-nodisc" data-iconshadow="false">
                    <h3>Search</h3>
                    <form action="" id="search" method="POST" novalidate="novalidate">
                        <div class="js-selectblock">
                            <div class="js-select" data-role="fieldcontain">
                                <label for="search" class="select">Search By</label>
                                <select data-role="none" name="select2[]" class="mySelect" data-theme="e" placeholder="Select Filter">
                                    <option value="" selected="selected">Please Select&hellip;</option>
                                    <option value="name">Name</option>
                                    <option value="address1">Address 1</option>
                                    <option value="city">City</option>
                                    <option value="state">State</option>
                                    <option value="country">Country</option>
                                    <option value="zipCode">Zip Code</option>
                                    <option value="contactName">Contact Name</option>
                                    <option value="contactPhone">Contact Phone</option>
                                    <option value=""></option>
                                </select>
                                <div style="width:100%;height:10px;display:block;"></div>
                                <label for="search">Search For</label>
                                <input type="search" name="" id="search" class="inline" value="" placeholder="Search" data-theme="d" data-inline="true">
                                <a type="button" class="closeselect" id="remove" data-icon="minus" data-iconpos="right" data-inline="true" data-theme="d" data-mini="true">Delete Filter</a>
                            </div>
    ...

JavaScript

$(document).on('pageinit', function(){
                $('.mySelect').addClass('ui-select');
                $.mobile.ignoreContentEnabled = true;
                $('#addmore').on('click', function(){
                    if($('.closeselect').length < $('.js-select:first option').length) {
                        $('.js-selectblock > .js-select:first').clone().appendTo('.js-selectblock');   
                        $('.mySelect:not(:last) > option:selected').each(function () {
                            var disableOption = $(this).val();
                            $('.mySelect:last > option').each (function () {
                                if (disableOption === $(this).val()) {
                                   $(this).attr('disabled', 'disabled');   
                                }                      
                            });
                        }); 
                        $('.mySelect:last > option:not(:disabled):first').attr('selected', 'selected');
                        disableSelectedOption();               
                    }
                  
                    if($('.closeselect').length >= $('.js-select:first option').length) {
                        $('#addmore').hide();
                    }  
                }); 
                $('form').on('click','.closeselect', function(){
                    console.log('close click');
                     if($('.closeselect').length > 1) {
                        console.log('close click');
                        $(this).parent().remove(); 
                         disableSelectedOption();
                         $('#addmore').show();
                     }                   
                });
                $('form').on('change','.mySelect', function () {
                    disableSelectedOption();
                });

                function disableSelectedOption() {
                    $('.mySelect > option').each(function () {
                      ...