title: Duplicate Javascript Voting functions causing strange error
body: <p>I'm having trouble duplicating my working voting function code. It only works with one copy, but once I copy and paste it. Even if I change the name, value, class or id names in it seems to cause an error that if I click on the vote up or vote down arrow only one copy changes text instead of working independently.</p>
  
  <p>Here is an incomplete fiddle that need some troubleshooting:</p>
  
  <p><a href="http://jsfiddle.net/74a9c1bw/" rel="nofollow">http://jsfiddle.net/74a9c1bw/</a></p>
  
  <p>Help me figure out how to get an independent second copy of the following code: </p>
  
  <p>
      </p>
  
  <pre><code>&lt;input name="vote" class="voteup"  type="radio" value="Yes" onclick = "showMessage(1)"/&gt;
   &lt;label class="voteup-label" for="voteup"&gt;&lt;/label&gt;   
  
  &lt;!--Vote Number--&gt; 
  &lt;div class="votenumber"&gt;
  
  &lt;div id="voteup" style="display:none"&gt;100&lt;span class="percentagesign"&gt;%&lt;/span&gt;&lt;/div&gt; 
  
  &lt;div id="notrated"&gt;Not Rated&lt;/div&gt;
  
  &lt;div id="votedown" style="display:none"&gt;0&lt;span class="percentagesign"&gt;%&lt;/span&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!--End Votenumber--&gt; 
  
  &lt;input name="vote" class="votedown" type="radio" value="No" onclick = "showMessage(2)"/&gt;
  &lt;label for="votedown"&gt;&lt;/label&gt;
  &lt;p class="votecounter"&gt;0 Votes&lt;/p&gt;
  
  &lt;/div&gt;&lt;!--End Voting--&gt; 
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;!--Voteup or Votedown--&gt;
  $(document).ready(function() {     
    $('.vote').click(function() {
      $('img', this).attr('src', function(i, oldSrc) {
          return oldSrc == 'voteup.png' ? 'votedown.png' : 'voteup.png';
      });
      $('.voteswitch').toggle(400);
      return false;
    });
  });
  
      function showMessage(which) {
  if (which == 1) {
  document.getElementById("voteup").style.display = "block";
  document.getElementById("votedown").style.display = "none";
  document.getElementById("notrated").style.display = "none";
  }
  else {
  document.getElementById("voteup").style.display = "none";
  document.getElementById("votedown").style.display = "block";
  document.getElementById("notrated").style.display = "none";    
  }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> .votesystem {
          display: inline-block;
          list-style-type: none;
          padding-top: 3px;
          border-left: #000 1px solid;
          border-bottom: #000 1px solid;
          width: 85px;
          text-align: center;
          height: 107px;
          float: right;
          position: relative;
      }
  
  
   input.voteup[type="radio"]{
      opacity: 0; right:33px; margin-top:7px;
      position:absolute; cursor:pointer;
  }
   input.voteup[type="radio"]+label{
      background:url(images/voteupall.png) bottom center no-repeat; padding-left:40px; padding-bottom:10px;
  }
   input.voteup[type="radio"]:checked+label{
      background:url(images/voteupall.png)top center no-repeat; padding-left:40px; padding-bottom:10px;
  }
  
   input.voteup[type="radio"]:hover+label{
      background:url(images/voteupall.png)top center no-repeat; padding-left:40px; padding-bottom:10px;
  }
  
  
   input.votedown[type="radio"]{
      opacity: 0; right:33px; margin-top:-5px;
      position:absolute; cursor:pointer;
  }
   input.votedown[type="radio"]+label{
      background:url(images/votedownall.png)top center no-repeat; padding-left:40px; padding-top:9px; 
  }
   input.votedown[type="radio"]:checked+label{
      background:url(images/votedownall.png)bottom center no-repeat; padding-left:40px; padding-top:9px;
  }
  
   input.votedown[type="radio"]:hover+label{
      background:url(images/votedownall.png)bottom center no-repeat; padding-left:40px;  padding-top:9px;
  }
  
  
  .votenumber { color:#666; font-size:22px; margin:0; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:42px; padding-top:5px; padding-bottom:2px;  }
  
  #notrated { font-size:15px; color:#999; }
  
  #voteup { margin-left:-2px;}
  
  #votedown { margin-left:-2px;}
  
  .percentagesign { font-size:15px; margin-top:-3px; position:absolute; }
  
  .votecounter { position:relative; top:8px; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:12px; }
  </code></pre>