problems with selecting proper elements

problems with selecting proper elements

Hello.

I wanted to use great jquery rating star system which is available here:
http://www.visualjquery.com/rating/rating_redux.html
but it wont work properly with jquery 1.3.X (the version there uses jquery 1.1)

I wanted to modificate the code and replace the following lines (which cause problems - detected by firebug):
stars.lt(rating[0]).addClass("on");
=>
$("div.star:lt(" + parseInt(rating[0]) + ")").addClass("on");

and

stars.lt(stars.index(this) + 1).addClass("hover");
=>
$("div.star:lt(" + (parseInt(stars.index(this)) + 1) + ")").addClass("hover");


The rating star code will now work, but if I have more than one matching items (rating forms) on the web, it will apply all changes to the first one - because of the code I modificated.

Could someone please help me / point me out how to change it so that the changes will be applied to the proper element (as in version that works with jquery 1.1.)?
I'm almost certain these 2 are the crucial lines.

Heres the full code I currently have (replaced lines are commented out):
(function($) {
  var buildRating = function(obj) {
    var rating = averageRating(obj),
        obj    = buildInterface(obj),
        stars  = $("div.star", obj),
        cancel = $("div.cancel", obj)

        var fill = function() {
          drain();
          $("a", stars).css("width", "100%");
        //alert(stars.index(this));
         $("div.star:lt(" + (parseInt(stars.index(this)) + 1) + ")").addClass("hover");
          //stars.lt(stars.index(this) + 1).addClass("hover");
        },
        drain = function() {
          stars.removeClass("on").removeClass("hover");
        },
        reset = function() {
          drain();
        $("div.star:lt(" + parseInt(rating[0]) + ")").addClass("on");
       
          //stars.lt(rating[0]).addClass("on");
          if(percent = rating[1] ? rating[1] * 10 : null) {
         //$("eq:" + rating[0] +  "").addClass("on").children("a").css("width", percent + "%");
            stars.eq(rating[0]).addClass("on").children("a").css("width", percent + "%");
          }
        },
        cancelOn = function() {
          drain();
          $(this).addClass("on");
        },
        cancelOff = function() {
          reset();
          $(this).removeClass("on")
        }

    stars
      .hover(fill, reset).focus(fill).blur(reset)
      .click(function() {
      alert("test");
        rating = [stars.index(this) + 1, 0];
        //$.post(obj.url, { rating: $("a:first", this)[0].href.slice(1) });
        reset();
      stars.unbind().addClass("done");
        $(this).css("cursor", "default");
        return false;
      });

    reset();
    return obj;

  }

  var buildInterface = function(form) {
    var container = $("<div></div>").attr({"title": form.title, "class": form.className});
    $.extend(container, {url: form.action})
    var optGroup  = $("option", $(form));
    var size      = optGroup.length;
    optGroup.each(function() {
      container.append($('<div class="star"><a href="#' + this.value + '" title="Give it ' + this.value + '/'+ size +'">' + this.value + '</a></div>'));
    });
    $(form).after(container).remove();
    return container;
  }

  var averageRating = function(el) { return el.title.split(":")[1].split(".") }

  $.fn.rating = function() { return $($.map(this, function(i) { return buildRating(i)[0] })); }

   if ($.browser.msie) try { document.execCommand("BackgroundImageCache", false, true)} catch(e) { }

})(jQuery)


I really hope someone can help me.

Thanks in advance!