title: Jquery select two columns in a table and compare TD values row by row
body: <p>I've created a small html file that allows the user to select two columns using two dropdown menus.</p>
  
  <p>Once the user selects the two columns and clicks the COMPARE button, the two selected columns will appear.</p>
  
  <p>Next, the user should view the difference between the two columns (they have different background color). The rows containing the same text in the colored columns should display the text "no change".</p>
  
  <p>Here is a fiddle that better illustrates my problem: </p>
  
  <p><a href="https://jsfiddle.net/0Lzwojmb/" rel="nofollow noreferrer">https://jsfiddle.net/0Lzwojmb/</a></p>
  
  <p>I tried with this code:</p>
  
  <pre><code>$(".tabella tr").each(function(){
      if($(this).find("td.slot1").text()==$(this).find("td.slot2").text())
      {
         $(this).find("td.slot2").text("MATCHED!");
      }   
  });
  </code></pre>
  
  <p>...but it doesn't work :(.</p>
  
  <p>Last question (sorry): if you click the button COMPARE you get the two columns to show. And if you selects other columns and RE-click the COMPARE button the other columns appear on the right. How can reset the whole page when clicking again on the COMPARE button?</p>
  
  <p>Perhaps I can hide the COMPARE button and show another button (RESET) that will reload the page. This would be my newbie approach. What is the best approach to get the same result?</p>