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…</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 searchBox" 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>
...
JavaScript
$(document).on('pageinit', function(){
$('.mySelect').addClass('ui-select');
$.mobile.ignoreContentEnabled = true;
$('#addmore').on('click', function(){
debugger;
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 () {
...