Handling unchecked checkboxes when the element name uses array notation

I have a form that is displayed in a table. This table has some elements and javascript which allows the template row to be duplicated to allow the user to add/remove rows as they want.

Here is a simplified version of the template

<tr data-being_removed="false" data-type="pickup" id="stop_table_row_template" style="display: none;">
    <td>
        <div class="input-group" style="margin: 0px;">
            <input type="text" placeholder="Pickup Number" class="form-control form-control-sm" name="stops[stop_number][]">
            <div class="input-group-text">
                <input class="form-check-input mt-0" name="stops[require_appointment][]" type="checkbox" value="1">
                &nbsp;Req. Appt.
            </div>
        </div>
        <select placeholder="Location" class="form-select ship_to_selector form-control-sm mt-1" name="stops[location_id][]">
            <option value="">Location</option>
        </select>
    </td>
</tr>

However, checkboxes are not sent to the server if they are not checked. Usually to get around this I would create a hidden input with an identical name. However, in this case, that would cause the actual checkbox to be associated to the wrong row because the hidden input will ALWAYS be sent but the checkboxes will also SOMETIMES be sent, throwing off the implied indexes.

In the current code, it does not work for the opposite reason. For example, if the user has 3 rows, but the checkbox is only checked on the 2nd row, the form thinks the checkbox belongs to the first row because there is no matching name attribute sent to the server from the first row.

I would like to avoid having to specify indexes in the name attributes themselves. Is there any way I can send a "0" value for the name of the checkbox if the one with "1" value is not checked?