JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
<script>
function disableSelectedValues() {
var cssOptions = [];
$(".input_field.criteria_countries option").removeAttr("disabled");
$.each($(".input_field.criteria_countries"), function(index, select) {
cssOptions = [];
var values = $(select).val();
if (values) {
for (var i = 0; i < values.length; i++) {
cssOptions.push("option[value=" + values[i] + "]");
}
}
if (cssOptions.length) {
console.log(".input_field.criteria_countries " + cssOptions.join(",.input_field.criteria_countries "));
// disable all options with the selected values
$(".input_field.criteria_countries " + cssOptions.join(",.input_field.criteria_countries ")).attr("disabled", true);
// enable all options with the selected values for the current select
$(select).find(cssOptions.join()).removeAttr("disabled");
}
});
}
function add_mitigator() {
var option = '';
var delete_pop_up = '';
var tot_risk = $("#total_risk").val();
var max_risk = $("#max_risk_id").val();
var increased_risk = parseInt(parseInt(max_risk) + 1);
var total_risk = parseInt(parseInt(tot_risk) + 1);
for (i = 1; i < 10; i++) {
option += "<option value=" + i + ">" + i + "</option>";
}
var risk_div = $("<div id='risk_" + increased_risk + "' style='margin-top: 5px;'></div>");
var risk_drp_cont = $("<div id='risk_drp_cont" + increased_risk + "' style='float:left; width:302px; position:relative;'></div>");
var risk_drop = $('<select />', {
'id': 'risk_mitigator_offer_' + increased_risk,
'name':...
JavaScript
$(document).ready(function () {
$("#risk_mitigator_offer_1").chosen().change(function () {
disableSelectedValues();
$(".input_field.criteria_countries").trigger("chosen:updated");
});
$("#risk_mitigator_offer_2").chosen().change(function () {
disableSelectedValues();
$(".input_field.criteria_countries").trigger("chosen:updated");
});
});