html - Javascript Specificity (Only Respond to Clicked Item) -

i'm new javascript , looking way have code respond clicked item in list. (full jsfiddle here: http://jsfiddle.net/5cjpf/, although reason buttons aren't responsive...)

for functions below, each applies clicked item, however, right first item each refers responding. friend of mine suggesting creating class each function, have no idea begin , appreciate push in right direction!

<script type="text/javascript">     var submitcount = 0;     function arrow() {         if (submitcount == 0 || submitcount % 2 == 0) {             var extension = document.getelementbyid('one');             extension.insertadjacenthtml('beforeend', '<div id="before-two"><div id="two"><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtytag(1)"></button><!----><button type="button" class="tag" id=tag>synonyms</button><!----><button type="button" class="right" onclick="modify_qtytag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtytag(1)"></button><!----><button type="button" class="tag" id=tag>beast</button><!----><button type="button" class="right" onclick="modify_qtytag(0)"></button></div><p><div class="btn-group"><!----><button type="button" class="left" onclick="modify_qtytag(1)"></button><!----><button type="button" class="tag" id=tag>antonyms</button><!----><button type="button" class="right" onclick="modify_qtytag(0)"></button><!----></div><div class="btn-group"><button type="button" class="left" onclick="modify_qtytag(1)"></button><!----><button type="button" class="tag" id=tag>gentle</button><!----><button type="button" class="right" onclick="modify_qtytag(0)"></button></div></p></div></div></div>');         }         else if(document.getelementbyid('two')) {             var deleted = document.getelementbyid('before-two');             deleted.remove(deleted.selectedindex);           }         submitcount += 1;     };      var upvotes = 0;     var votes = 0;      function modify_qty(val) {         var qty = document.getelementbyid('qty').value;          votes += 1;         upvotes += val;          var percent = math.round((upvotes / votes) * 100);          document.getelementbyid('qty').value = percent;     }      var upvotestag = 0;     var votestag = 0;      function modify_qtytag(val) {         var extension = document.getelementbyid('tag');          votes += 1;         upvotes += val;          var percent = math.round((upvotes / votes) * 100);          var allthings = percent + "%," + " 100%," + " 100%," + " 100%;";          extension.style.backgroundsize = allthings;         extension.style.backgroundsize = "100%";         extension.style.backgroundsize = percent + "%, 100%, 100%, 100%";     } </script> 

the js should be:

function modify_qtytag(val, tagid) {     var extension = document.getelementbyid(tagid);     var votes = parseint(extension.getattribute("data-votes"), 10) + 1;     var upvotes = parseint(extension.getattribute("data-upvotes"), 10) + val;     var percent = math.round((upvotes / votes) * 100);     var allthings = percent + "%," + " 100%," + " 100%," + " 100%;";     extension.style.backgroundsize = allthings;     extension.setattribute('data-votes', votes);     extension.setattribute('data-upvotes', upvotes); } 

the html like:

<button type="button" class="left" onclick="modify_qtytag(1, 'tag1')"></button> <button type="button" class="tag" id="tag1" data-votes="0" data-upvotes="0">synonyms</button> 

this adds argument function tells tag update. , instead of using global variables votes , upvotes, stores in data attributes in tag element, each 1 can have own percentage.