accessing <span> text within a <div>

Question

My first post, so go easy on me!

I'm very new to programming, and I'm making a browser based application that will track arriving flights (I'm an aircraft mechanic by day) and use the .effect("highlight") to make elements flash when the arrival time is near. This will be displayed on a big monitor in our ready room.

Not all of the code is in it's final stages. Some of it is still set up just to test whether or not functions work, like the pulseRed and pulseYellow functions below. I've only tested this in chrome, and only intend it to run in chrome for now, so no guarantees that it will work properly in other browsers.

Here's my issue...

Each new timer that is created is a new div with a unique ID. Each div contains several span elements that are used to display the info on the monitor and store the data.

If you run this code, the block that is marked # problem area # should alert the value of arrivalHour, and it does! Success!... sort of.The problem is that after the first timer, each time the function fires it jams ALL of the arrivalHour values into one window. So if 3 timers had values of 05, 08, and 12, it would display 050812, and it would do it 3 times due to the window popping up once per timer in the loop. What I'm trying to do is have each window display the info from that ONE span element in the div. I'm assuming I need to index which element of the loop I'm on, but I'm fairly stumped as to where the [z] index should go (if that's even the fix here). Once I can pull single values out of those spans, I can set up the rest of the loops and statements to handle the data and I'm basically done.

WHEW! Long explanation, but I wanted to make sure my question made sense.

$(document).ready(function() {
    var i = 01; //variable for iterating ID's for each timer below
    $("#startButton").fadeTo("fast",0.5);
    $("#startButton").mouseenter(function() {
        $("#startButton").fadeTo("slow",1);
    });
    $("#startButton").mouseleave(function() {
        $("#startButton").fadeTo("slow",0.5);
    });
    // pulse function causes the called object to blink red 3 times.
    var pulseRed = function() {
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
        $(".timers").effect("highlight", {color: 'red'}).fadeIn();
    }
    // pulse function to blink the target div yellow - currently pulses ALL div's for testing
    var pulseYellow = function() {
        $(".timers").effect("highlight").fadeIn();
        $(".timers").effect("highlight").fadeIn();
        $(".timers").effect("highlight").fadeIn();
    }
        setInterval(function(){ //set up just for testing purposes
        pulseYellow();
        pulseRed();
            for (var z = 1; z <= ($(".timers").length); z++) {
                alert($('div.timers span.arrivalHour').text()); //<---PROBLEM AREA!!!!!
            }
    },5000);    

//time data formatting for proper display
    var d = new Date();
    var currentHours = function() {
        var hourCheck = d.getHours();
            if (hourCheck <= 9) {
                return("0" + hourCheck);
        }
            else {
                return(hourCheck);
        }
    };
    var currentMinutes = function() {
        var minCheck = d.getMinutes();
            if (minCheck <= 9) {
                return("0" + minCheck);
        }
            else {
                return(minCheck);
        }
    };
//button to create the new timer and related functions. 
    $("#startButton").click(function() {
        var tailNumber = $("#tail").val();
        var borderColor = $("#colorPicker").val();
        var alertTime = $("#alert").val();
        var arrHour = $("#hour").val();
        var arrMinute = $("#minute").val();
        var remarks = $("#discrepancy").val();
    // example of similar code at  http://jsfiddle.net/nick_craver/TTHDQ/
    //creates a new div containing all of the user input data, iterates a new ID so that div's can be blinked individually
        $("<div />", { "class":"timers", id:"timer"+i})
            .append("<span class='tailNumber'>"+tailNumber +'  '+"</span><span class='arrivalHour'>"+arrHour+"</span><span>-</span><span class='arrivalMinute'>"+arrMinute+"</span><span class='table'>"+' ' +"</span><span class='remarks' style='margin: 0 auto; text-align: right'>"+remarks+"</span><div class='delete'>DELETE</div></div>")
            .appendTo("#main");
            $("#timer" + i).css('border', '2px solid ' +borderColor);   
        i++;

        //delete timer DIV's when no longer needed
        $(".delete").click(function() {
            $(this).closest(".timers").remove();            
        });
        $('#getTail').get(0).reset();
    }); 
});

EDIT: adding HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Flight Timer</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body id="main">
            <div id="menu">
                <form id="getTail" action="">
                    Flight Tracker<br>
                    <input id="tail" type="text" name="Tail Number" placeholder="Tail #">
                    <select id="colorPicker">
                        <option value="Green">Color</option>
                        <option value="Red">Red</option>
                        <option value="Yellow">Yellow</option>
                        <option value="Green">Green</option>
                        <option value="Blue">Blue</option>
                        <option value="Orange">Orange</option>
                    </select>
                    <select id="alert">
                        <option value="default">Flash...</option>
                        <option value="1">1 minute prior</option>
                        <option value="5">5 minutes prior</option>
                        <option value="10">10 minutes prior</option>
                        <option value="15">15 minutes prior</option>
                    </select>
                    <input id="hour" type="text" name="hour" placeholder="Hour">
                    <br>
                    <input id="minute" type="text" name="minute" placeholder="Minute"> 
                    <input id="discrepancy" type="text" name="pirep" placeholder="Discrepancy or action">
            </form>
            <div id="startButton">
                Add Timer
            </div>
    </body>
</html>

Answer 1

If I understand correctly, you want a separate alert for each timer (specified by $('.timers')). If that is the case, you want to switch that for statement to look like this:

$("div.timers").each(function() {
    alert($(this).find('span.arrivalHour').text());
});

The reason why you're getting all of the text combined is that $('div.timers span.arrivalHour') works as a global selection - meaning that it will retrieve all of the matching elements in the page. The code I'm proposing iterates through each timer, retrieving the arrival hour for each one.