Dynamic button click not working.

Dynamic button click not working.

In simple terms, I have a hidden template that contains some text and a button.
  
  1. <div id="itemContainer" class="itemColumn">
  2.    <div class="itemDiv" id="items">
  3.         <ul />
  4.     </div>
  5. </div>
  6. <ul class="hiddenTemplate">
  7.
    <li id="TemplateListItem" class="release">
  8.         <div class="releaseDetailDev">
  9.               <p class="title">Title: </p>
  10.               <p class="itemTitle"></p>
  11.             <div class="buttons">
  12.               <button type="button" class="editButton">Edit</button>
  13.             </div>
  14.         </div>
  15.     </li>
  16. </ul>
    17. In a loop function I am cloning the #TemplateListItem, adding data to the title. And then I want to add a click event that has a different variable for each button. My code is as follows. 
  17. function addItemToList(currentItem) {
  18.     //create a copy of the <li> template
  19.     var itemTemplate = $('#TemplateListItem').clone();
  20.      //remove the unnecessary id attribute
  21.     itemTemplate.attr('id', null);
  22.     //set the values
  23.    itemTemplate.find('.Title').text(currentItem.get_item('Title'));
  24.       var id = currentItem.get_item('ID');
  25.       itemTemplate.data('id', id);
     

  26.     itemTemplate.find('.editButton').live("click", function () {
  27.         OpenEditDialog(id);
  28.     });
  29.     var list = $('.itemDiv>ul');
  30.     list.append(itemTemplate);
  31. }
     
  32. function OpenEditDialog(id) {
  33.     alert("Id = " + id
  34.    }
    35. This does sucessfully display a list of items with buttons. So I have items with Id's 1 - 5. No matter which button I click I will get 5 pop ups one after another saying
    Id = 1
    Id = 2
    Id = 3
    Id = 4
    Id = 5



      How can I ensure that when I hit a given button it only gives me the alert for the button I've clicked and no other alerts afterwards (unless I click the given button of course)?