Call jQuery function several times, and related actions only to siblings

Question

I'm making a checklist, in this checklist you can add/remove task, and set a deadline for each task. When the deadline equals the current time, an alert is displayed.

It's working fine when there's only one task, but if I got more tasks, it's only showing an alert for the first task.

When the alert is confirmed, the task's checkbox (green box at right) for alert is unchecked, but this makes all task's alert checkboxes uncheck instead of only the one confirmed.

Guess this needs to be done with an array or so, but I don't get it working.. Does anyone know how to solve this?

Tx in advance!

I'm linking to everything I got in this fiddle.

HTML:

<div class='todo_list'>
<div class='add_list'>&#43; List</div><br>
<h3 contenteditable='true'>New List</h3>
<ul>
    <li>
        <input type='checkbox' class='task_status'>
        <p class='task' contenteditable='true'> </p>
        <input type='datetime-local'>
        <input type='checkbox' class='alert_status'>
    </li>
</ul>
<div class='add_task'>&#43;</div><br>
</div>

jQuery (only part that's going wrong, see fiddle for whole doc)

setInterval(function checkAlerts(){
//Set current date & time
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var hours = date.getHours();
var minutes = date.getMinutes();
var currentDate = date.getFullYear() + '-' +
((''+month).length<2 ? '0' : '') + month + '-' + ((''+day).length<2 ? '0' : '') + day + 'T' + ((''+hours).length<2 ? '0' : '') + hours + ':' + ((''+minutes).length<2 ? '0' : '') + minutes;

//Set task deadline
var taskDeadline = $('.alert_status:checked').parent().find("input[type='datetime-local']").val();
//Set task text
var taskText = $('.alert_status:checked').parent().children('p').html()
//Check if task deadline matched current time
if ( currentDate ==  taskDeadline) {
    //If so, give an alert
    if(confirm( taskText ) ){
        //If confirmed, uncheck task alert
        $('.alert_status:checked').prop('checked', false)
    }
    else{
        //Do nothing
    }
};

}, 3000);

Answer 1

Here you go http://jsfiddle.net/hBz7R/5/

The main change is this...

$.each($('.alert_status:checked'), function (index, value) {
   var currentAlert = $(this);
   // your code...
}