jquery button only works for first button?

Question

I have a table of records. each table row has a submit button - when the submit button is clicked it makes a ajax request to the server. The first button works and request is sent to server. The next buttons do not work and the page refreshes each time when it should not. Any reason why this is happening ? I believe it is because i have an id on the button which references all records, but i am not sure.

Here is snippet of code:

$("#submitBtn").on('click', function(event) {

event.preventDefault();

var registerNo = $('#registerNo').val();
var date = $('#date').val();
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var refNo = $('#refNo').val();
var attendance = $("#AttendanceValue option:selected").val();

var obj = {
    attendance : attendance,
    refNo : refNo,
    registerNo : registerNo,
    date : date,
    startTime : startTime,
    endTime : endTime
}

/*

$.ajax({
    url: "process.asp",
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(obj),
    success: function (response) {
        alert(JSON.stringify(response));
    },
    error: function(response) {
        alert('There was an error: ' + response.responseText);
    }       
});

*/
console.log(obj); 
});

Answer 1

$("button[name=submitBtn]").on('click', function(event) {
    var registerNo = $(this).closest("tr").find('input[name=registerNo]').val();
    var date = $(this).closest("tr").find('input[name=date]').val();
    var startTime = $(this).closest("tr").find('input[name=startTime]').val();
    var endTime = $(this).closest("tr").find('input[name=endTime]').val();
    var refNo = $(this).closest("tr").find('input[name=refNo]').val();
    var attendance = $(this).closest("tr").find("select[name=AttendanceValue]").val();

    var obj = {
        attendance : attendance,
        refNo : refNo,
        registerNo : registerNo,
        date : date,
        startTime : startTime,
        endTime : endTime
    }

    /*Your AJAX code place here*/
    console.log(obj);
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Reg No</th>
        <th>Date</th>
        <th>Start time</th>
        <th>End time</th>
        <th>Ref no</th>
        <th>Attendence</th>
    </tr>
    <tr>
        <td><input type="text" name="registerNo"></td>
        <td><input type="date" name="date"></td>
        <td><input type="time" name="startTime"></td>
        <td><input type="time" name="endTime"></td>
        <td><input type="text" name="refNo"></td>
        <td>
            <select name="AttendanceValue"> 
                <option value="">select</option>
                <option value="Present">Present</option>
                <option value="Absent">Absent</option>
            </select>
        </td>
        <td><button type="button" name="submitBtn">submit</button></td>
    </tr>
    <tr>
        <td><input type="text" name="registerNo"></td>
        <td><input type="date" name="date"></td>
        <td><input type="time" name="startTime"></td>
        <td><input type="time" name="endTime"></td>
        <td><input type="text" name="refNo"></td>
        <td>
            <select name="AttendanceValue"> 
                <option value="">select</option>
                <option value="Present">Present</option>
                <option value="Absent">Absent</option>
            </select>
        </td>
        <td><button type="button" name="submitBtn">submit</button></td>
    </tr>
    <tr>
        <td><input type="text" name="registerNo"></td>
        <td><input type="date" name="date"></td>
        <td><input type="time" name="startTime"></td>
        <td><input type="time" name="endTime"></td>
        <td><input type="text" name="refNo"></td>
        <td>
            <select name="AttendanceValue"> 
                <option value="">select</option>
                <option value="Present">Present</option>
                <option value="Absent">Absent</option>
            </select>
        </td>
        <td><button type="button" name="submitBtn">submit</button></td>
    </tr>
</table>

Don't use ID anywhere, because ID is unique for each element, so use either name or class. If don't want to reload page while click button means, don't forgot to give type="button" in the button element.