Duplicating Jquery plugin

Duplicating Jquery plugin

I'm brand-spanking new to Jquery - so I am very sorry if this is a ridiculously stupid question.  I have been trying so many things out today, and I just can't figure out how to do this.  I purchased a snippet of code from a site to create a box on my website that links to an RSS feed from another site.  The code that came with it is as follows


  1. $.fn.rssWidget = function(feedUrl, dateFormat){
        var dateFormatF = dateFormat || 'day/month/year hours:minutes';
        var googleFeedUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0';
        var title = '<h4 class="rsswidget-feed"><a href=":url">:title</a></h2>';
        var item = '<hr/><h5 class="rsswidget-title"><a href=":url">:title</a></h3><p class="rsswidget-date">:date</p><div class="rsswidget-content">:text</div>';
        $(this).each(function(){
            var $that = $(this);
            var feed = $(this).attr('feed') || feedUrl;
            feed = encodeURIComponent(feed);
            $.getJSON(googleFeedUrl
                + '&q=' + feed
                + '&callback=?'
                ,function(d){
                    var f = d.responseData.feed;
                    console.log(f);
                    $that.html(title.replace(':url', f.link).replace(':title', f.title));
                    $(f.entries).each(function(i,e){
                        var date = new Date(e.publishedDate);
                        var dateString = dateFormatF
                        .replace('day', date.getDate() < 9 ? '0' + date.getDate() : date.getDate())
                        .replace('month', (date.getMonth() + 1) < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
                        .replace('year', date.getFullYear())
                        .replace('hours', date.getHours() < 9 ? '0' + date.getHours() : date.getHours())
                        .replace('minutes', date.getMinutes() < 9 ? '0' + date.getMinutes() : date.getMinutes())
                        ;
                        $that.append(item
                            .replace(':title', e.title.substring(0, 35))
                            .replace(':url', e.link)
                            .replace(':text', e.content.substring(0, 75))
                            .replace(':date', dateString));
                    });
                });
        });


    };







































And then you use this in the HTML document where you want the RSS to show

  1.                             <script type="text/javascript">
                $(function(){
                    $("div#feed").rssWidget('http://illinois.edu/lb/rss/18/text.xml');
                });
            </script>
            <div id="feed"></div>









And of course you can create your own styling in CSS, which I have managed to figure out just fine =)  The code runs flawlessly ... until I try to run multiple instances of it on the same page (So if I want to show more than one feed of more than one source on the same page)

My first thought was to go in and change all the "var" instances to add a "2" to the end of each - so for example, change


  1.         var $that = $(this);
to

  1.         var $that2 = $(this2);


I then saved that as jquery.rsswidget.js and called it into place in my header of my HTML file, in addition to jquery.rsswidget.js


and I just cannot figure out how to get it to work

Can someone please help me out =)