jQuery click function only activating first element

Question

I am building a system to manage tickets. Each ticket has a 'Start', 'Pause', 'Complete', and 'Edit' button. The buttons are generated by using PHP which pulls the tickets from a database and loops through the code for each ticket. Here is the PHP/HTML:

        foreach ($ticket as $print) {
            echo '<div id="ticketDiv">';
            echo '<tr class="myTickets" id="' . $print->id . '" >';
                    echo '<td id="myTickets_business_name_column">' . $print->business_name . '</td>';
                    echo '<td id="myTickets_subject_column">' . $print->subject . '</td>';
                    echo '<td id="myTickets_status_column">';
                        if ($print->status == 'Begin'){
                            echo 'Open';
                        }
                        else {
                            echo $print->status;
                        }
                    echo '</td>';
            echo '</tr>';
            echo '<tr id="ticketButtons' . $print->id . '" class="ticketButtonsRow" style="display:none;">';
                    echo '<td></td>';
                    echo '<td>';
                            echo '<div class="ticketButtons">';
                                if ($print->status == 'Paused')
                                {
                                    echo '<button value="' . $print->id . '" class="StartButton">Start</button>';
                                }
                                elseif ($print->status == 'Open' or 'Begin')
                                {
                                        echo '<button value="' . $print->id . '" class="PauseButton">Pause</button>';
                                }
                                echo '<button value="' . $print->id . '" class="CompleteButton">Complete</button>';
                                echo '<a href="' . site_url( 'edit-ticket' ) . '?id=' . $print->id . '"><button id="editButton" value="' . $print->id . '" class="EditButton">Edit</button></a>';
                            echo '</div>';
                    echo '</td>';
                    echo '<td></td>';
            echo '</tr>';
        }

For each ticket they have a unique ID that is generated from the database. Each button has the value of the unique ID for that ticket. When you click any of the buttons (Start, Pause, etc) the jQuery then takes over to update the database. It takes the value of the button and passes it along to the submit form that then runs the query to update the database.

The problem I'm having is when there are multiple tickets in a list with the same status (Open or Paused) and you click a Start/Pause button for any of the tickets below the first one, it passed along the ID of the first ticket and not the one you clicked.

Here is my jQuery for Start and Pause:

/* 
** Ticket updating buttons
*/
$(document).ready(function($){
    /* Toggles ticket buttons for each ticket */
    $(".myTickets").click(function() {
        var ticket_id = $(this).attr('id');
        $('.ticketButtonsRow').hide();
        $(this).next('#ticketButtons' + ticket_id).slideToggle(100);
    });

    /* When the start button is clicked - the following below is executed */
    $(".StartButton").click(function(e) {

        /* Pulls ticket ID from button clicked */
        var ticket_id = $(".StartButton").val();

        /* Hides the ticket buttons on click */
        $('#ticketButtons' + ticket_id).hide(100);

        /* Places data into an array */
        var dataString = 'start=' + ticket_id;

        /* Enables data logging in the console */
        console.log(dataString);

        /* Where the magic happens */
        $.ajax({
               type: "POST",
               url: 'submit-data',
               data: dataString,
               cache: false,
               success: function(data)
               {
                   /* Reloads the page after success */
                    location.reload();

               }
             });
    });

/* When the pause button is clicked - the following below is executed */
$(".PauseButton").on('click', function(e) {
    console.log($(this).text());
    var ticket_id = $(".PauseButton").val();

    /* Hides the ticket buttons on click */
    $('#ticketButtons' + ticket_id).hide(100);

    /* Shows the note form */
    $("#addNoteFormDiv").show(200);

    /* When cancel button is clicked close notes and cancel pause action */
    $("#notesCancelButton").click(function() {
        $("#addNoteFormDiv").hide(200);
    });

    /* After notes has been added and submit button clicked */
    $("#notesDoneButton").click(function(e) {

        $("#addNoteFormDiv").hide(200);

        var notes = $("#addNotes").val();
        var employee_id = $("#notes_employee_id").val();

        /* Places data into an array */
        var dataString = 'pause=' + ticket_id + '&notes=' + notes + '&employee_id=' + employee_id;

        /* Enables data logging in the console */
        console.log(dataString);

        /* Where the magic happens */
        $.ajax({
               type: "POST",
               url: 'submit-data',
               data: dataString,
               cache: false,
               success: function(data)
               {
                   /* Reloads the page after success */
                    document.getElementById("addNoteForm").reset();
                    //location.reload();
               }
             });

        /* Prents the execuation of the actual submit of the form */
        e.preventDefault();
    });
});
return false;

Also, you will see some code in there for a slideToggle. That is for hiding and showing the buttons when you click on a ticket.

Answer 1

You have several instances of code that is selecting the value of the first button instead of the clicked button.

Change

/* Pulls ticket ID from button clicked */
var ticket_id = $(".StartButton").val();

To

/* Pulls ticket ID from button clicked */
var ticket_id = $(this).val();

Answer 2

First, you may be setting up your conditions incorrectly:

$print->status == 'Open' or 'Begin' will always return true - you're evaluating if $print->status == 'Open' correctly, but if that fails the or keyword doesn't shortcut to testing the same variable. You may be looking for

if ( $print->status == 'Open' or $print->status == 'Begin' )

As for the jQuery, it looks like you're grabbing the ticket_id from

var ticket_id = $(".StartButton").val();

and

var ticket_id = $(".PauseButton").val();

Try setting both of these to

var ticket_id = $(this).val();

and see if that fixes the problem.

Answer 3

I don`t know if this can help but change from

 $(".myTickets").click(function() {
    var ticket_id = $(this).attr('id');
});

to something like this :

 $("*.myTickets").click(function() {
    var ticket_id = $(this).attr('id');
});

DO NOT FORGET TO PUT THE ASTERISK