title: merging <td> rows in one column of html table
body: <p>I have a requirement, if i have same data in column1 of 's with same id then i need to merge those cells and show their respective values in column2.
  i.e., in fiddle <a href="http://jsfiddle.net/7t9qkLc0/12/" rel="nofollow">http://jsfiddle.net/7t9qkLc0/12/</a>  the <strong>key</strong> column have 3rows with data 1 as row value with same id and has corresponding different values in <strong>Value</strong> column i.e., AA,BB,CC. I want to merge the 3 rows in <strong>key</strong> Column and display data 1 only once and show their corresponding values in separate rows in <strong>value</strong> column.
  Similarly for data4 and data5 the values are same i.e.,FF and keys are different, i want to merge last 2 rows in Value column and dispaly FF only one time and show corresponding keys in key column. All data i'm getting would be the dynamic data. Please suggest. 
  Please find the fiddle <a href="http://jsfiddle.net/7t9qkLc0/12/" rel="nofollow">http://jsfiddle.net/7t9qkLc0/12/</a></p>
  
  <p>Sample html code:</p>
  
  <pre><code>&lt;table width="300px" height="150px" border="1"&gt;
  &lt;tr&gt;&lt;th&gt;Key&lt;/th&gt;&lt;th&gt;Value&lt;/th&gt;&lt;/tr&gt;                            
  &lt;tr&gt;
  &lt;td id="1"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;1&lt;/td&gt;
  &lt;td id="aa"&gt;AA&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="1"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;1&lt;/td&gt;
  &lt;td id="bb"&gt;BB&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="1"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;1&lt;/td&gt;
  &lt;td id="cc"&gt;CC&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="2"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;2&lt;/td&gt;
  &lt;td id="dd"&gt;DD&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="2"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;2&lt;/td&gt;
  &lt;td id="ee"&gt;EE&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="3"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;3&lt;/td&gt;
  &lt;td id="ff"&gt;FF&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="4"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;4&lt;/td&gt;
  &lt;td id="ff"&gt;FF&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td id="5"&gt;data&amp;nbsp;&amp;nbsp;&amp;nbsp;5&lt;/td&gt;
  &lt;td id="ff"&gt;FF&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px"&gt;
  
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>