<div class="container">
<div class="row">
<div class="card">
<h4 class="text-center">Compare 4!</h4>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<h5 class="text-center">One</h5>
<form>
<select class="form-select" id="select1">
<option value="null" selected>Please select</option>
<option value="Orange">Orange</option>
<option value="Lime">Lime</option>
<option value="Melon">Melon</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
<option value="Peach">Peach</option>
<option value="Berry">Berry</option>
</select>
</form>
</div>
<div class="col-12 col-md-3">
<h5 class="text-center">Two</h5>
<form>
<select class="form-select" id="select2">
<option value="null" selected>Please select</option>
<option value="Orange">Orange</option>
<option value="Lime">Lime</option>
<option value="Melon">Melon</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
<option value="Peach">Peach</option>
<option value="Berry">Berry</option>
</select>
</form>
</div>
<div class="col-12 col-md-3">
<h5 class="text-center">Three</h5>
<form>
<select class="form-select" id="select3">
<option value="null" selected>Please select</option>
<option value="Orange">Orange</option>
<option value="Lime">Lime</option>
<option value="Melon">Melon</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
<option value="Peach">Peach</option>
<option value="Berry">Berry</option>
</select>
</form>
</div>
<div class="col-12 col-md-3">
<h5 class="text-center">Four</h5>
<form>
<select class="form-select" id="select4">
<option value="null" selected>Please select</option>
<option value="Orange">Orange</option>
<option value="Lime">Lime</option>
<option value="Melon">Melon</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
<option value="Peach">Peach</option>
<option value="Berry">Berry</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="card hidden" id="compare-card">
<div class="card-body">
<div class="row text-center">
<div class="col-12 col-md-3" id="compare-col-1">
</div>
<div class="col-12 col-md-3" id="compare-col-2">
</div>
<div class="col-12 col-md-3" id="compare-col-3">
</div>
<div class="col-12 col-md-3" id="compare-col-4">
</div>
</div>
</div>
</div>
</div>
</div>
.hidden {
display: none;
}
.card {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.15);
}
let option1 = "null";
let option2 = "null";
let option3 = "null";
let option4 = "null";
$("#select1").change(function () {
option1 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select2").change(function () {
option2 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select3").change(function () {
option3 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
$("#select4").change(function () {
option4 = $(this).val();
buildCompareCols(option1, option2, option3, option4);
});
function emptyCompareCols() {
$("#compare-col-1").empty();
$("#compare-col-2").empty();
$("#compare-col-3").empty();
$("#compare-col-4").empty();
}
function buildCompareCols(one, two, three, four) {
emptyCompareCols();
let compare_card = $("#compare-card");
compare_card.removeClass("hidden");
if (one !== "null") {
$("#compare-col-1").append(one);
} else if (one === "null") {
$("#compare-col-1").empty();
}
if (two !== "null") {
$("#compare-col-2").append(two);
} else if (two === "null") {
$("#compare-col-2").empty();
}
if (three !== "null") {
$("#compare-col-3").append(three);
} else if (three === "null") {
$("#compare-col-3").empty();
}
if (four !== "null") {
$("#compare-col-4").append(four);
} else if (four === "null") {
$("#compare-col-4").empty();
}
if (one === "null" && two === "null" && three === "null" && four === "null") {
emptyCompareCols();
compare_card.addClass("hidden");
}
}