Multiple "instances" of jquery script

http://jsfiddle.net/wcXsF/

For each new tag field i now have to add this to the html:

<ul id开发者_如何转开发="demo3" name="demo3">
    <li>
        tag
    </li>
</ul>
<div class="buttons">
<button id="demoGetTags3" value="Get Tags">Tags</button>
</div>

But also this to the javascript

$('#demo3').tagit({});
$('#demoGetTags3').click(function(){showTags($('#demo2').tagit('tags'))});

The idea is that i want to be able to use multiple times(with diffrent tags):

<ul id="demo" name="demo">
        <li>
            tag
        </li>
    </ul>
<div class="buttons">
<button id="demoGetTags" value="Get Tags">Tags</button>
</div>

And just keep the javascript static (for caching etc.). Is this possible?

---

Use classes instead of IDs.

<ul class="tag-list">
    <li>
        tag
    </li>
</ul>
<div class="buttons">
<button class="get-button" value="Get Tags">Tags</button>
</div>

$('.buttons .get-button').click(function(){
    showTags( $(this).parent().prev( '.tag-list' ).tagit( 'tags' ) );
});