重复的Javascript投票函数导致奇怪的错误

我无法复制我的工作投票功能代码。它只适用于一个副本，但一旦我复制并粘贴它。即使我更改了中的名称、值、类或id名称，似乎也会导致一个错误，即如果我单击“向上投票”或“向下投票”箭头，只有一个副本会更改文本，而不是独立工作

以下是一个不完整的小提琴，需要进行一些故障排除：

请帮助我了解如何获取以下代码的独立第二个副本：

---

ID在文档中必须是唯一的，请使用类而不是脚本代码与html不匹配。。。标记中没有可单击的

class=voces

。什么是

独立的第二份副本

？它的class=vote我会编辑它。也是一个独立的第二份，是一个独立的副本，允许你投赞成票或反对票，而不影响任何其他副本。

<input name="vote" class="voteup"  type="radio" value="Yes" onclick = "showMessage(1)"/>
 <label class="voteup-label" for="voteup"></label>   

<!--Vote Number--> 
<div class="votenumber">

<div id="voteup" style="display:none">100<span class="percentagesign">%</span></div> 

<div id="notrated">Not Rated</div>

<div id="votedown" style="display:none">0<span class="percentagesign">%</span></div>

</div><!--End Votenumber--> 

<input name="vote" class="votedown" type="radio" value="No" onclick = "showMessage(2)"/>
<label for="votedown"></label>
<p class="votecounter">0 Votes</p>

</div><!--End Voting--> 

<!--Voteup or Votedown-->
$(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";    
}
}

 .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; }