Can’t access Jquery object inner data

Hi I have a plugin in WordPress that shows individual rating in comments area. I am trying to get votes for each individual user in a div with data field. Here is the structure.

<div id="r1" class="widget_rate"
      data-post-id="<?php echo $post_id ?>"
      data-user-id="<?php echo $user_id;  ?>"
      data-nonce="<?php echo $nonce ?>"
      data-total="***<?php echo $data;*** ?>"
     >

     <div data-rating="1" class="star_1 stars_ratings"><b>1</b></div>
     <div data-rating="2" class="star_2 stars_ratings"><b>2</b></div>
     <div data-rating="3" class="star_3 stars_ratings"><b>3</b></div>
     <div data-rating="4" class="star_4 stars_ratings"><b>4</b></div>
     <div data-rating="5" class="star_5 stars_ratings"><b>5</b></div>

 </div> 

data-total is what I am after. But when I load page jQuery set rating for all users according to first value. I thought that might jQuery only called once but when i checked in a browser I found all instances of “widget_rate” div. Here is,

   [div#r1.widget_rate, div#r1.widget_rate, div#r1.widget_rate, prevObject: jQuery.fn.init[1], context: document, selector: ".widget_rate", jquery: "1.11.1", constructor: function…]
0: div#r1.widget_rate
1: div#r1.widget_rate
2: div#r1.widget_rate
context: document
length: 3
prevObject: jQuery.fn.init[1]
selector: ".widget_rate"
__proto__: Object[0]

I have three comments and I have all three instances so I tried to access them by assigning

var temp = $(".widget_rate")[0];

And I can see the value in outerHTML but I can’t access it. It returns undefined function error.

var temp = $(".widget_rate")[0].html();
var temp = $(".widget_rate")[0].outerHTML;

But nothing is working. I would be grateful to have a work around.