jQuery Poll Options Selected - 1st, 2nd, 3rd

First of all, thanks for any help! I'm in a bind and banging my head against the wall, because I'm really new to JS and can't figure this out.

Basically, I have a poll that allows a maximum of 3 checkboxes to be checked. The checkboxes are not visible, but are hidden and I'm using images for selecting. The output is laid out like this:

<div id="options">
  <div class="option">
    <div class="overlay"></div>
    <input type="checkbox" id="rank-answer-#" onchange="overlay_image(this)" />
    <img src"..." />
  </div>
  ...more <div class="options"> repeating with same format...
</div>

What I'm trying to do is when a user selects the first option, the overlay DIV populates with a 1, and when they select a 2nd, the overlay div for that option populates with a 2, and so on and so forth for the 3rd option. This is what I have so far:

function overlay_image(element) {
  jQuery(document).ready(function($) {
    var overlaydiv = jQuery(element).prev().attr("class");
    var checkid = jQuery(element).attr("id");
    if($('input#' + checkid).is(':checked')) {
      jQuery('.' + overlaydiv).html(#);
    }
  });
});

That's all I have. I don't really know where to go from there. Thanks again for your help!