跨越upvote插件时显示错误,如堆栈溢出

I have a jQuery up vote plugin. Everything is working fine except the error handling. My up vote plugin is in a foreach loop. like this below

  if($RES['counter'] === '1'){
     echo '
             <td>
               <div  data-id='.$id.' class="upvote upvote-serverfault">
                <a style="cursor:pointer;" class="upvote upvote-on" title="This idea is helpful"></a>
                <span class="count">'.$counter.'</span>
                <a class="downvote"></a>
                <span id='.$index.'><span class="votingFeedback"></span>
              </div>
          </td>';  
        }
        else 
            if($RES['counter'] === '-1'){
        echo '
          <td>
            <div  data-id='.$id.' class="upvote upvote-serverfault">
                <a style="cursor:pointer;" class="upvote upvote-down" title="This idea is helpful"></a>
                <span class="count">'.$counter.'</span>
                <a class="downvote downvote-on"></a>
                <span id='.$index.'><span class="votingFeedback"></span>  
            </div>
          </td>';
        }

The problem is when the user tries to span my voting system it will throw an error.The error checking is done in my PHP file and It's working but when I tries to dispaly the error on screen instead of showing the message on that particular topic is it shows on all the topic id

enter image description here

I was trying to make something like stack overflow. If you try to span the up or down vote it will throw and error but it's seems harder then I thought

My ajax call to my php file

<script>
var callback = function(data) {
    $.ajax({
        url: 'voting.php',
        type: 'post',
        data: { id: data.id, up: data.upvoted, down: data.downvoted, star: data.starred },
        success: function(data) {      
        $(".votingFeedback").html(data);
    }
    });
};
$('.upvote').upvote({callback: callback});

 </script>

You are getting unrecognized expression because you are replacing your original data variable with the new results from the ajax. from @allcutt answer try changing it to this.

var callback = function(data) {
    $.ajax({
        url: 'voting.php',
        type: 'post',
        data: { id: data.id, up: data.upvoted, down: data.downvoted, star: data.starred },
        success: function(result) {      
        $("[data-id='" + data.id + "'] .votingFeedback").html(result);
    }
    });
};
$('.upvote').upvote({callback: callback});

When you get a response back from your ajax request you are selecting all voting feedback elements on the page because you are using a class selector. This is updating all the span with the class votingFeedback

You need to use a selector that is unique to the element you want to update. You already have a container div with the id. Use that as part of the selector.

$("[data-id='" + data.id + "'] .votingFeedback").html(data);

But you will also want to rename the parameter of the success function because you are defining data twice. This will mean that data.id doesn't exist anymore. Rename it to something like response or rename the parameter of the outer function.