javascript - Calling a JS function in a loop and specify where it was called -

new javascript apologies if dumb question!

i'm having hard time explaining have simple thumbs up/down system this:

//thumbs down reviews $(function addthumbs() {     $(".vote-up").click(function() {         var review_id = $('#review_id').val();         var user_id = $('#user_id').val();         if (user_id == '') {             alert('no user id');         } else {             $("#flash").show();             $("#flash").fadein(400).html('<img src="ajax-loader.gif" />loading comment...');             $.ajax({                 type: "post",                 url: "ajax-thumbsup.php",                 data: {                     "user_id": user_id,                     "review_id": review_id //we passing name value in url                 },                 cache: false,                 success: function(html) {                     $('#vote-up').attr('src', 'img/upgreen.png');                 }             });         }         return false;     }); });    $(function addthumbsdown() {     $(".vote-down").click(function() {         var review_id = $('#review_id').val();         var user_id = $('#user_id').val();         if (user_id == '') {             alert('nouserid');         } else {             $("#flash").show();             $("#flash").fadein(400).html('<img src="ajax-loader.gif" />loading comment...');             $.ajax({                 type: "post",                 url: "ajax-thumbsdown.php",                 data: {                     "user_id": user_id,                     "review_id": review_id //we passing name value in url                 },                 cache: false,                 success: function(html) {                     $('#vote-down').attr('src', 'img/downred.png');                 }             });         }         return false;     }); }); 

and html looks this:

<div class="row">     <div class="thumbs">         <input type="hidden" id="review_id" value="11" />         <input type="hidden" id="user_id" value="5" />         <div id="pluses">0</div> <div id="progressdiv"></div>         <a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>          <a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>         <div id="minuses">0</div>     </div>     comments/likes </div>   <div class="row">     <div class="thumbs">         <input type="hidden" id="review_id" value="12" />         <input type="hidden" id="user_id" value="5" />         <div id="pluses">0</div> <div id="progressdiv"></div>         <a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>          <a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>         <div id="minuses">0</div>     </div>     comments/likes </div> 

if click second thumbs up, first 1 turns green, how tell javascript which img#vote-down needs changed?

ids on page have unique, need make common. should use common class reference element. this scope element clicked on , can traverse tree find elements after.

switch ids classes , combine logic have 1 function.

$(".thumbs").on("click", "img", function (e) {     var img = $(this),         isupvote = img.hasclass("vote-up"),         thumbselem = img.closest(".thumbs"),         review_id = thumbselem.find(".review_id").val(),         user_id = thumbselem.find(".user_id").val(),         active = isupvote ? "up" : "down",         inactive = isupvote ? "down" : "up";     e.preventdefault();     if (user_id == '') {         alert('nouserid');     } else {         $("#flash").fadein(400).html('<img src="ajax-loader.gif" />loading comment...');         $.ajax({             type: "post",             url: "ajax-thumbs" + active  + ".php",  //you should have 1 php, pass up or down!             data: {                 "user_id": user_id,                 "review_id": review_id //we passing name value in url             },             success: function (html) {                 thumbselem.find(".vote-" + active).prop('src', 'img/' + active + 'red.png');                 thumbselem.find(".vote-" + inactive).prop('src', 'img/' + active + '.png');             },             error: function () {                 alert("your vote not counted because of error, try again");             },             complete: function () {                 $("#flash").stop().hide();             }         });     } }); 

combining logic , adding simple check means not have maintain 2 sets of codes same thing.