more than one tagging form on a single page

Question

I am using a script from http://codecanyon.net/item/dynamic-tag-form/482498?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=RikdeVos . My work requires to have more than one tagging form in a single page. I want to display, say, three tagging forms with different ids: tags1 , tags2 and tag3 .

<div id="tags1"></div>
<div id="tags2"></div>
<div id="tags3"></div>

and calling the script from:

<script>
  $(document).ready(function(){
  $("#tags1").tag({
        width: 400,
        height: 90,
        inputName: 'tags1'
    });
});
 </script>

now how can I call tags2 and tags3 if I copy/paste the script portion and replace tags1 to tags2 I am getting the form but there must be a better way like passing name as variables in script.

Answer 1

Go through all the tagging forms by looping through each element in their container.

HTML:

<div class="tags-container">
    <div id="tags1"></div>
    <div id="tags2"></div>
    <div id="tags3"></div>
</div>

Javascript:

$(document).ready(function(){
    $(".tags-container div").each(function (index, element) {
        $(this).tag({
            width: 400,
            height: 90,
            inputName: $(this).attr('id')
        });
    });
});