jQuery for loop doesn't iterate

jQuery for loop doesn't iterate

In my script:
  1.  $(function() {
  2. var j;
  3. for (j = 1; j <= 3; j++) {
  4. $('#' + 'clickMe' + j).click(function() {
  5. $('#' + 'showMe' + j).toggle();
  6.     });
  7. }
  8.   });
  
In my HTML:
<table><tr>
<td><div id="clickMe1">100 cal tiles</div></td>
<td><div id="clickMe2">200 cal tiles</div></td>
<td><div id="clickMe3">300 cal tiles</div></td>
<td><div id="clickMe4">400 cal tiles</div></td>
</tr>
</table>

<div id="showMe1" style="display: none;">lorem ipsum</div>
<div id="showMe2" style="display: none;">lorem ipsum</div>
<div id="showMe3" style="display: none;">lorem ipsum</div>
<div id="showMe4" style="display: none;">lorem ipsum dolor amet</div>

This only renders the last showMe element, id="showMe4", so it prints out "lorem ipsum dolor amet." If you click on any of the tiles, it returns just the last showMe div.