Clickable <li> - click function of the last item spreading to other items

Question

I'm creating a list of clickable divs to show a pop up window with the information relative to the clicked item.

Every list item is assuming the 'on click' function of the last item of the list. When I remove the last item then they all assume the 'on click' function of the new last item.

(ex: I click on any item on the list and a pop window appears with the info about the last item. I remove it by clicking the button 'approve'. When i click on any item now a pop window will appear with the info of the new last item)

What I want is for it to show the info of the clicked item.

HTML

<ul id='absencesToApproveList'></ul>
<div class="popupBox approveAbsenceBox">
    <h3>Absence to Approve</h3>
    <div class="absencePhoto"></div>
    <p class="noteAbsence" ></p>        
    <button id="rejectAbsence"  style="width:40%; display:block-inline; float:left;">Reject</button>
    <button id="approveAbsence" style="width:40%; display:block-inline; float:right;">Approve</button>
</div>

JS

  function getAbsencesToApprove_success(tx, results) {
      var len = results.rows.length;
      if(internetStatus != 'none')
        $('#absencesToApproveList').empty()

      for (var i=0; i<len; i++) {
        var absence = results.rows.item(i);         
        var absenceType = absence.type;     
        var absenceText = absence.note;         
        var absenceDateFrom = absence.absenceFrom;      
        var absenceDateTo = absence.absenceTo;
        var yyyy = absenceDateFrom.split("-")[0];                   
        var mm = absenceDateFrom.split("-")[1];         
        var dd = absenceDateFrom.split("-")[2];
        var newAbsenceBox = $('<div class="absenceBox" style="border: 2px solid black; position:relative;" ')
                .append($('<div class="absenceDateBox" style="border: 2px solid black;" ')
                .append('<span style="display: inline-block;vertical-align: middle; line-height: normal;" </span ').text(dd + "/" + mm))
                .append($('<p class="absenceText" ').text(absenceText));
        var newAbsenceBoxItem = $('<li id="absence' + absence.id + 'Item" style="margin-left:-35px;" ').append(newAbsenceBox)
        $('#absencesToApproveList').append(newAbsenceBoxItem)
        $('#absence' + absence.id + 'Item').click(function(){   
            $('.absencePhoto').text('photo' + absence.id)
            $('.noteAbsence').text(absenceText)
            $('#addAbsenceBoxOuter2').show()            
            $('.approveAbsenceBox').show()
            $('#rejectAbsence').click(function () {     
                $('#addAbsenceBoxOuter2').hide()
                $('.approveAbsenceBox').hide()
                $('.absencePhoto').empty()
                $('.noteAbsence').empty()       
            })
            $('#approveAbsence').click(function () {
                $('#addAbsenceBoxOuter2').hide()
                $('.approveAbsenceBox').hide()
                $('.absencePhoto').empty()
                $('.noteAbsence').empty()
                db.transaction( 
                        function(tx){
                            tx.executeSql("DELETE FROM absences WHERE id=" + absence.id +";");
                        });

                db.transaction(
                        function(tx) {        
                            tx.executeSql("INSERT INTO absences (id,type,absenceFrom,absenceTo,note,aproved,picture) VALUES (" 
                                    + id++                                                                                                                        
                                    + ",'"                                                                                                                  
                                    + String(absenceType)                           
                                    + "','"                         
                                    + String(absenceDateFrom)                               
                                    + "','"                                 
                                    + String(absenceDateTo)                             
                                    + "','"                                 
                                    + absenceText                               
                                    + "',"                              
                                    + "'true'"  
                                    + ","                               
                                    + "'image.jpg'"                                 
                                    + ")");
                        }, transaction_error);

                db.transaction(getAbsences, transaction_error); 

            })      
          })
      }
      $('#absencesToApproveList').show()    
  }

Demo: http://jsfiddle.net/8LdKh/3/ Thanks in advance

Answer 1

The variables absence.id & absenceText can't be used because it will contain last value in the loop. Instead you will have to get the selected ID somehow and use it. Here is a simple approach.

var selectedID = this.id.substring(7,8); //Will work only for one digits
//$('.absencePhoto').text('photo' + absence.id)
$('.absencePhoto').text('photo' + selectedID) 

Similarly have to get the absenceText value,

 //adding id on creation
 .append($('<p id="absenceText' + i + '" class="absenceText">').text(absenceText));
 //using id to fetch the value
 $('.noteAbsence').text($("#absenceText" + selectedID ).text())

Fiddle here