Comparing 4 different values from select dropdown inputs with jQuery/javascript.

Having the ability to do a comparison between up to 4 different selected values. Whilst the CodePen example only adds the name, the comparison would list comparable values (height, price etc).

This function is run on interaction with any one of the 4 inputs

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

It clears the compare columns and then will apply the values if there is a selection (not default null value).

If that column has the selection as null (nothing selected) then it is emptied.

When all four selections are null the comparison card is hidden.

The rest of the Javascript:

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