Multiple instances of jQuery on same page

Question

I have a list of items on a page dynamically generated - I can get the $itemid of each one easily enough.

I am trying to setup a vote for each one but I can't make the instances different enough for the instances of the vote links not to get confused with each other, and the page is trying as you would expect, to post all the items to my vote.php page

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".submitVote a").click(function()
        {
            var ID = <?php echo $itemid;?>;
            var add = 1;
            var votedby = <?php echo $usr_id ;?>;
            var rating = <?php echo $ratings;?> 

            var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
            $("#vote").text(rating+1); 

                $.ajax({
                type: "POST",
                url: "vote.php",
                data: queryString,
                cache: false,
                success: function(html)
                {

                    $(".submitVote").html('<p style="margin:1px;padding:0px;"></p>');
                    $("#greet").html("Thanks for voting!");
                    $("#greet").delay(500).fadeOut(5000);

                }
                });
        });
    });
</script>

    <div id="<?php echo $itemid;?>" style="width:350px;">
        <span class="submitVote" >
            <p style="margin:1px;padding:0px;">
                Submit your <a href="#">vote</a>
            </p>
        </span>
        <div id="voteBox">
            <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
            <span style="color:#fae240;">votes</span>
        </div> 
        <div id="greet" style="padding-left:65px;"></div>
    </div>

Answer 1

OK, in your HTML:

<div id="<?php echo $itemid;?>" style="width:350px;">
    <span class="submitVote" >
        <p style="margin:1px;padding:0px;">
            Submit your <a href="#">vote</a>
        </p>
    </span>
    <div id="voteBox">
        <div id="vote<?php echo $itemid;?>"> <?php echo $ratings;?> </div>
        <span style="color:#fae240;">votes</span>
    </div> 
    <div id="greet" style="padding-left:65px;"></div>
</div>

(well, your PHP that generates your HTML) you're already putting an item id somewhere. What you could do is add it to the <a> so that it's easier to find in the "click" handler:

    Submit your <a href='#' data-item-id='<?php echo $itemid;?>' data-ratings='<?php echo $ratings;?>' data-user-id='<? php echo $usr_id; ?>'>vote</a>

The user id could probably be stashed just once, but I'll leave it like that for simplicity. By doing that, everything you need for casting a vote is right there on the <a> itself. That's useful because your event handler will be called with that DOM node as this. Thus, you only need the JavaScript code in your page once — or, better, it can be in a separate file you import.

$(document).ready(function()
{
    $(".submitVote a").click(function()
    {
        var $clicked = $(this);
        var $voteBlock = $clicked.closest('.submitVote');
        var ID = $clicked.data('item-id');
        var add = 1;
        var votedby = $clicked.data('user-id');
        var rating = $clicked.data('ratings'); 

        var queryString = 'id='+ ID +'&votedby='+votedby +'&add='+add +'&rating='+rating;
        $("#vote").text(rating+1); 

            $.ajax({
            type: "POST",
            url: "vote.php",
            data: queryString,
            cache: false,
            success: function(html)
            {

                $voteBlock.html('<p style="margin:1px;padding:0px;"></p>');
                $("#greet").html("Thanks for voting!");
                $("#greet").delay(500).fadeOut(5000);

            }
            });
    });
});

Those calls to .data() extract the values from those three "data-" attributes in the <a>.

edit — I updated the function above to make sure that only the <a> that's clicked gets zapped after a vote. I added the variable "$voteBlock", which will be the parent <span> of the <a>. (By the way, it's not really correct HTML to put a <p> inside a <span>, but it probably won't cause drastic problems. You could replace the <span> with <div> but whatever.)