title: How to auto-scroll a related html table
body: <p>I have 2 tables, and they are related, because they are showing the same in different languages. When I press <code>Key down</code> or <code>Key up</code>, the item inside my clicked table moves and scrolls down, but not the related one. How can I make this?</p>
  
  <p>Here is a piece of the html5 code:</p>
  
  <pre><code>&lt;div id="first_table"&gt;
      &lt;table id="first_header"&gt;
        &lt;tr&gt;
          &lt;th class="field_1"&gt;1&lt;/th&gt;                
          &lt;th class="field_2"&gt;2&lt;/th&gt;
          &lt;th class="field_3"&gt;3&lt;/th&gt;
          &lt;th class="field_4"&gt;4&lt;/th&gt;
          &lt;th class="field_5"&gt;5&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="first_table_container"&gt;
        &lt;table id="first_text_table"&gt;
         &lt;tbody id="first_text_table_body"&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="first_current"&gt;
       &lt;textarea id="first_current_text" &gt;&lt;/textarea&gt;                           
       &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div id="second_table"&gt;
      &lt;table id="second_header"&gt;
        &lt;tr&gt;
          &lt;th class="field_1"&gt;1&lt;/th&gt;                
          &lt;th class="field_2"&gt;2&lt;/th&gt;
          &lt;th class="field_3"&gt;3&lt;/th&gt;
          &lt;th class="field_4"&gt;4&lt;/th&gt;
          &lt;th class="field_5"&gt;5&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;div id="second_table_container"&gt;
        &lt;table id="second_text_table"&gt;
         &lt;tbody id="second_text_table_body"&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="second_current"&gt;
       &lt;textarea id="second_current_text" &gt;&lt;/textarea&gt;                           
       &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Here the CSS:</p>
  
  <pre><code>#first_table
  {
  width:90%;
  float: left;
  border-radius: 5px;
  border-color: black;                                
  border-collapse: collapse;    
  margin-right:33px;
  margin-bottom: 1%; 
  }       
  #second_table
  {
  width:90%;
  float: right;
  border-radius: 5px;
  border-color: black;                                
  border-collapse: collapse;    
  margin-right:30px;
  margin-bottom: 1%; 
  }
  #first_table_container, #second_table_container 
  {
  height: 200px;
  overflow-y: scroll;
  border-style: solid;
  border-width: 0px;
  border-color: #5e5e5e;                           
  border-bottom-width:1px;
  }
  </code></pre>
  
  <p>And now the javasrcipt (jQuery) code:</p>
  
  <pre><code>if (e.keyCode == 38) { // up
                  var index = $('#first_text_table_body tr &gt; td').index();
                  $('#second_text_table_body').scrollTo(index);
  }
  </code></pre>
  
  <p>I've tried <code>scrollTo()</code>, but I can't make it works properly. My goal is, if I press <code>key up</code>, my first list scrolls up and the second list has to scroll up as well.</p>
  
  <p>Thank you!</p>