plugins - Coding numerous instances of jQuery underlines -

i'm using custom jquery plugin creates customisable text underlines script. plugin creates these underlines on mouseover events. far have managed customise underlines permanent , load web page struggling create numerous instances of underline on 1 web page, reason despite use of classes, 1 underline can exist @ time.

here jquery;

(function($){   $.fn.underline = function(options) {     var defaults = {                      width:       1,                     distance:    0,                     color:       '#000',                     durationon:  250,                     durationoff: 250,                     extend:      2,                    };      var options = $.extend(defaults, options);           $('body').append('<div class="underlineline"></div>');            $('.underlineline')              var position  = $(this).offset();             var top       = position.top;             var left      = position.left;              var objwidth  = $(this).width();             var objheight = $(this).height();               $('.underlineline').css({'position'        :'absolute',                                      'display'         :'none',                                      'height'          : options.width+'px',                                      'background-color': options.color,});              $('.underlineline').css({'left' : left-options.extend,                                      'top'  : top+objheight+options.distance,                                      'width': objwidth+options.extend*2 })                                .fadein();   }; })(jquery); 

the calling of script on php web-page:

<script language="javascript" type="text/javascript">    $(document).ready(function() {         $('.underline a').underline({             width:           4,                     //default: 1             distance:        -1,                    //default: 0             color:           '#66ffb2',     //default: #000             durationon:  350,                       //default: 250             durationoff: 350,                       //default: 250             extend:          2,                     //default: 2,     });     }); </script> 

and simple html summon:

<div class="underline"><a href="#">link</a></div> <div class="underline"><a href="#">link</a></div> <div class="underline"><a href="#">link</a></div> 

if spare couple of minutes me appreciate it. thanks, matt

you needed loop objects in this

(function($){   $.fn.underline = function(options) {     var defaults = {                      width:       1,                     distance:    0,                     color:       '#000',                     durationon:  250,                     durationoff: 250,                     extend:      2,                    };      var options = $.extend(defaults, options);      for(i = 0; < this.length; i++)     {         var row = this[i];         var line = $("<div class=\"underlineline\"></div>");          var position  = $(row).offset();         var top       = position.top;         var left      = position.left;          var objwidth  = $(row).width();         var objheight = $(row).height();          $(line).css({'position' :'absolute',                      'display'         :'none',                      'height'          : options.width+'px',                      'background-color': options.color,});          $(line).css({'left' : left-options.extend,                      'top'  : top+objheight+options.distance,                      'width': objwidth+options.extend*2 }).fadein();          $('body').append(line);     } }; })(jquery);