jquery - Duplicate Javascript Voting functions causing strange error -

jquery - Duplicate Javascript Voting functions causing strange error -

i'm having problem duplicating working voting function code. works 1 copy, 1 time re-create , paste it. if alter name, value, class or id names in seems cause error if click on vote or vote downwards arrow 1 re-create changes text instead of working independently.

here incomplete fiddle need troubleshooting:

http://jsfiddle.net/74a9c1bw/

help me figure out how independent sec re-create of next code:

<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-->

javascript:

<!--voteup or votedown--> $(document).ready(function() { $('.vote').click(function() { $('img', this).attr('src', function(i, oldsrc) { homecoming oldsrc == 'voteup.png' ? 'votedown.png' : 'voteup.png'; }); $('.voteswitch').toggle(400); homecoming 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"; } }

css:

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

javascript jquery css html5