JS - Compare Columns

HTML

<div id="ricerca">
  <p>
    Select first column:
    <select name="m1" required id="m1">
      <option value="1">col1</option>
      <option value="2">col2</option>
      <option value="3">col3</option>
      <option value="4">col4</option>
      <option value="5">col5</option>
      <option value="6">col6</option>
      <option value="7">col7</option>

    </select>
  </p>
  <p>&nbsp;</p>
  <p>
    Select second column:
    <select name="m2" required id="m2">
      <option value="1">col1</option>
      <option value="2">col2</option>
      <option value="3">col3</option>
      <option value="4">col4</option>
      <option value="5">col5</option>
      <option value="6">col6</option>
      <option value="7">col7</option>
    </select>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>
    <input name="button" type="submit" id="button" value="Compare">

  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<section>
  <table width="650" border="0" cellspacing="3" cellpadding="0">
    <tbody>
      <tr>
        <td colspan="3">header</td>
        <td class="hide col1">header col1</td>
        <td class="hide col2">header col2</td>
        <td class="hide col3">header col3</td>
        <td class="hide col4">header col4</td>
        <td class="hide col5">header col5</td>
        <td class="hide col6">header col6</td>
        <td class="hide col7">header col7</td>
      </tr>
      <tr>
        <td colspan="2">row header 1</td>
        <td>&nbsp;</td>
        <td class="hide col1">any text</td>
        <td class="hide col2">any text </td>
        <td class="hide col3">any text </td>
        <td class="hide col4">any text</td>
        <td class="hide col5">sadf</td>
        <td class="hide col6">text</td>
        <td class="hide col7">text any</td>
      </tr>
      <tr>
        <td>row header 2</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="hide col1">any text</td>
        <td class="hide col2">any text </td>
        <td class="hide col3">any text </td>
 ...

CSS

.hide {
  display: none;
}

.slot1 {
  background-color: rgba(129, 205, 126, 1.00);
}

.slot2 {
  background-color: rgba(146, 195, 223, 1.00);
}

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
  font-size: 11px;
  padding: 10px;
}

* {
  margin: 0;
  padding: 0;
}

section {
  width: 99%;
  padding: 10px;
}

table {
  border: 2px solid #333;
  border-width: 2px;
}

table td,
table th {
  border: 1px solid #333;
  border-width: 0 0 1px 1px;
  padding: 4px;
}

table td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
}

table td .header {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
}

.ruotato {
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=-1);
}

.highlight {
  background-color: #FFF500
}

#reset {
  display: none;
}

JavaScript

$('#button').click(function() {

  // Reset table

  $('.slot1 .hide').contents().unwrap();
  $('.slot2 .hide').contents().unwrap();

  $('.slot1 .match').remove();
  $('.slot2 .match').remove();

  $('.slot1').removeClass('slot1').hide();
  $('.slot2').removeClass('slot2').hide();

  // Compare columns

  var macchina1 = $('#m1 option:selected').val();
  var macchina2 = $('#m2 option:selected').val();

  $('tr td.col' + macchina1).each(function() {
    $(this).addClass('slot1');
  });

  $('tr td.col' + macchina2).each(function() {
    $(this).addClass('slot2');
  });

  $('.slot1').each(function() {
    $(this).insertBefore($(this).prevAll('.slot2'));
  });

  $('tr td.col' + macchina1).each(function() {
    $(this).show();
  });

  $('tr td.col' + macchina2).each(function() {
    $(this).show();
  });

  $("table tr").each(function() {

    var t1 = $(this).find("td.slot1").text();
    var t2 = $(this).find("td.slot2").text();

    if (t1 == t2) {
      $(this).find("td.slot2").wrapInner("<span class='hide'></span>");
      $(this).find("td.slot2").append("<span class='match'>MATCHED!</span>");
    }
  });
});