Add div just below the td.button that called it – Blancer.com Tutorials and projects

I have a table with some information, one of the columns has a button that when clicking displays a div, I need this div to be displayed below the td.button that invoked it

https://jsfiddle.net/L4jh0rsw/23/

I would like to use Jquery and/or JavaScript for the resolution

<html>
<table border="1">
<tr>
  <th>Button</th>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
</tr>
<tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr><tr>
  <td class='class'>X</td>  
  <td>information</td>
  <td>information</td>
  <td>information</td>
  <td>information</td>
</tr>
</table>
</html>

<br>

<div id="div" style="display: none">
  information about that rowxcolumn
</div>

$(".class").on("click", function(){ 

    $("#div").show();   
  
});