<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");
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js