Coding numerous instances of jQuery underlines

Question

I'm using a custom jQuery plugin that creates easily customisable text underlines with script. The plugin only creates these underlines on mouseover events. So far I have managed to customise it so that underlines are permanent and load with the web page but I am struggling to create numerous instances of the underline on one web page, for some reason despite the use of classes, only one underline can exist at any time.

Here is the 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 the script on my 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 the 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 anyone could spare a couple of minutes to help me with this I would really appreciate it. Thanks, Matt

Answer 1

You needed to loop all the 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; i < 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);