I am using this jQuery plugin for star ratings: http://orkans-tmp.22web.net/star_rating/

Everything is going great, including using AJAX, etc. The problem is that I need to have many per page and can't quite figure out how to work with the selectors to achieve this. I think this is probably very easy for someone who knows their jQuery...

Here's some code below... There are multiple kids per page, and I need one rating widget for each kid.

I can set up each #rat to be unique with a kid attached to it, like #1rat, #2rat, etc. But then how would I set up the function to be run on each of them independently?

<script type="text/javascript">
    $(function(){
    var kidval=1; //this needs to be setup for each kid... not just 1
    var uidval=1;
        $('#rat').children().not("select, #rating_title").hide();
        var $caption = $('<div id="caption"/>');
        $('#rat').stars({
            inputType: "select",
            oneVoteOnly: false,
            callback: function(ui, type, value) {                   

                $("#"+kidval+"messages").text("Saving...").fadeIn(30);
                $.post("vote.php", {rate: value, kid: kidval, uid: uidval}, function(json) {
                    $("#"+kidval+"messages").text("Average");
                    ui.select(Math.round(json.avg));
                    $caption.text(" (" + json.votes + " votes, " + json.avg + " avg)");
                    $("#"+kidval+"messages").text("Rated " + value + " Thanks!").stop().css("opacity", 1).fadeIn(30);
                    setTimeout(function(){
                        $("#"+kidval+"messages").fadeOut(1000)
                    }, 2000);
                }, "json");
            }
        });

        $('#rat').stars("selectID", -1);
        $caption.appendTo(#rat);
        $('<div id="'+kidval+'messages"/>').appendTo(#rat);
    });