Output votes to div dynamically in wordpress

Question

I can´t get the correct output for the corresponding div on each post. How can I pass in the corresponding post id when clicking the button? This is an AJAX-request via jQuery.

template.php

          $votes = get_post_meta($post->ID, "votes", true);
          $votes = ($votes == "") ? 0 : $votes;


          echo '<div id="vote_counter">'. $votes.'</div><br>';

voteme.js

 jQuery(document).ready( function() {

 jQuery(".user_vote").on('click', function(event) {
    event.preventDefault();
    post_id = $(this).attr("data-post_id");
    nonce = $(this).attr("data-nonce");

 jQuery.ajax({
     type : "post",
     dataType : "json",
     url : myAjax.ajaxurl,
     data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
     success: function(response) {
        if(response.type == "success") {
           jQuery("#vote_counter").html(response.vote_count);
        }
        else {
           alert("Your vote could not be added");
        }


     }

   });   

 });
   return false; 
});

functions.php

add_action( 'init', 'my_script_enqueuer' );

function my_script_enqueuer() {
   wp_register_script( "my_voter_script", get_stylesheet_directory_uri() .'/js/voteme.js', array('jquery') );
   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'my_voter_script' );

}

add_action("wp_ajax_my_user_vote", "my_user_vote");
add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

function my_user_vote() {

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
      exit("No naughty business please");
   }   

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
   $vote_count = ($vote_count == '') ? 0 : $vote_count;
   $new_vote_count = $vote_count + 1;

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

   if($vote === false) {
      $result['type'] = "error";
      $result['vote_count'] = $vote_count;
   }
   else {
      $result['type'] = "success";
      $result['vote_count'] = $new_vote_count;
   }

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();

}

function my_must_login() {
   echo "You must log in to vote";
   die();
}

Answer 1

[EDIT] Provided better replacements.

Try this:

In template.php, replace:

echo '<div id="vote_counter">'. $votes.'</div><br>';

..with:

echo '<div id="vote_counter-' . $post->ID . '" class="vote_counter">'. $votes.'</div><br>';

In voteme.js, replace:

jQuery("#vote_counter").html(response.vote_count);

..with:

jQuery("#vote_counter-" + post_id).html(response.vote_count);

You should also declare post_id and nonce as local variables; i.e.:

var post_id = $(this).attr("data-post_id"),
  nonce = $(this).attr("data-nonce");

Hope that helps.