Img src only changing once through javascript

Question

Alright so im building a voting system on my blog. Much like the one here on stackoverflow. The system works fine on the first post of the blog roll, but every other post the images aren't changing when they are clicked, however the actually voting process is still being carried out.

Why is that? Any help would be great!

Here is my JS:

function upvote(id)
  {
    sender = new XMLHttpRequest();
    if(document.getElementById("upvoteimg").src.indexOf("voted") == -1)  //have they already voted up?
    {
      document.getElementById("upvoteimg").src = "assets/upvoted.png"; // change to upvoted
      sender.open("GET","/like/index/" + id ,true);
      sender.send();
      document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) +1; //update #
    }
  else
    {
      document.getElementById("upvoteimg").src = "assets/upvote.png"; //change to not upvoted
      sender.open("GET","/like/index/" + id ,true);
      sender.send()
      document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) - 1; //update #
    }

  }

  function downvote(id)
  {
    sender = new XMLHttpRequest();
    if(document.getElementById("downvoteimg").src.indexOf("voted") == -1) //have they already downvoted?
    {
      document.getElementById("downvoteimg").src = "assets/downvoted.png"; //change to downvoted
      sender.open("GET","/like/down/" + id ,true);
      sender.send()
      document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) - 1; //update #
    }
  else
    {
      document.getElementById("downvoteimg").src = "assets/downvote.png"; //change to not downvoted
      sender.open("GET","/like/down/" + id ,true);
      sender.send()
      document.getElementById("likes").innerHTML = parseInt(document.getElementById("likes").innerHTML) +1; //update #
    }
  }

And here are the buttons in my view:

<!-- Voting System -->
<div id="post-vote">
    <% #DownVote %>
        <%if user_signed_in?%>  
            <%if Dislikes.where(:user_id => current_user.id, :article_id =>a.id).size == 0%>
                <%= image_tag("downvote.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg") %>
            <%else%>
                <%= image_tag("downvoted.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg") %>
            <%end%>
        <%else%>
            <%= image_tag("downvote.png", "onclick" => "alert('You must login to vote.')", "id" => "downvoteimg") %>
        <%end%>
    <% #TheNumber %>
    <span id="likes" class="vote-count"><%= a.likes.size - Dislikes.where(:article_id =>a.id).size%></span>

    <% #UpVote %>
        <%if user_signed_in?%>  
            <%if !a.likes.include?(current_user)%>
                <%= image_tag("upvote.png",  "id" => "upvoteimg", "onclick" => "upvote(#{a.id})") %>
            <%else%>
                <%= image_tag("upvoted.png",  "id" => "upvoteimg", "onclick" => "upvote(#{a.id})") %>
            <%end%>
        <%else%>
            <%= image_tag("upvote.png", "id" => "upvoteimg", "onclick" => "alert('You must login to vote.')") %>
        <%end%>
</div>

Answer 1

Changed all the images in the js to have and unique id document.getElementById("upvoteimg") to document.getElementById("upvoteimg" + id)

and all the images in the view to <%= image_tag("downvoted.png", "onclick" => "downvote(#{a.id})", "id" => "downvoteimg#{a.id}") %>