php – How to change input type='file' name at specific row in a dynamic table-ThrowExceptions

I am coding dynamic table where I choose 3 individual files to upload and the file name is displayed in the table cell base on the corresponding row.

However, i am only able to choose files for the first row. I am struggling to figure out how to this for other rows each time I try the file name only shows in the first row.

Table output:

My code:

<table style="font-size: 15px;" id="table2" border="0">
    <thead>
    <tr>
        <th width="4%">Ref ID</th>
        <th width="8%">Customer</th>
        <th width="5%">Service</th>
        <th width="10%">Process Map</th>
        <th width="10%">Presentation</th>
        <th width="10%">Requirements</th>
        <th width="7%">Date</th>
        <th width="15%">Action</th>
    </tr>
    <tbody id="doctbody">
    $result_count = mysqli_query( $conn,

    "SELECT COUNT(*) As total_records FROM `customer` `service_type` " );
    $total_records = mysqli_fetch_array( $result_count );
    $total_records = $total_records[ 'total_records' ];
    $total_no_of_pages = ceil( $total_records / $total_records_per_page );
    $second_last = $total_no_of_pages - 1; // total page minus 1

    $result = mysqli_query( $conn, "SELECT customer.Cus_id, customer.Date, customer.customer, service_type.Serv_Name
    FROM customer INNER JOIN service_type ON customer.Cus_id=service_type.Cus_id LIMIT $offset, $total_records_per_page
    " );

    while ( $row = mysqli_fetch_array( $result ) ) {

    echo "
    <tr>
        <td id='input'>" . $row[ 'Cus_id' ] . "</td>
        <td>" . $row[ 'customer' ] . "</td>
        <td>" . $row[ 'Serv_Name' ] . "</td>

        <td id='info' align='left'>
            <div class='image-upload'>
                <label for='file-input'>
                    <img id='img' src='images/noun_Add Document_13006.png' width='20' height='20'/>
                </label>
                <input type='file' id='file-input' name='sortfile'>
                <label id='file-name'>No file</label>
            </div>
        </td>
        <td align='left'>
            <div class='image-upload'>
                <label for='file-input1'>
                    <img src='images/noun_Add Document_13006.png' width='20' height='20'/>
                </label>
                <input type='file' id='file-input1' name='sortfile'>
                <label id='file-name1'>No file</label>
            </div>
        </td>
        <td align='left'>
            <div class='image-upload'>
                <label for='file-input2'>
                    <img src='images/noun_Add Document_13006.png' width='20' height='20'/>
                </label>
                <input type='file' id='file-input2' name='sortfile'>
                <label id='file-name2'>No file</label>
            </div>
        </td>
        <td>" . $row[ 'Date' ] . "</td>
        <td>
            <input type='submit' value='submit' class='btn btn-success' id='UpSubmit' name='UpSubmit'>
            <input type='submit' value='edit' class='btn btn-secondary' name='EdSubmit'>
            <input type='submit' class='btn btn-primary' value='delete' name='deSubmit'>
        </td>
    </tr>
    ";
    }
    mysqli_close( $conn );
    ?>
    </tbody>
</table>

This allow me to change file name when i choose a file but only happening for the first row

$("#file-input").change(function () {
    $("#file-name").text(this.files[0].name);
});

$("#file-input1").change(function () {
    $("#file-name1").text(this.files[0].name);
});
$("#file-input2").change(function () {
    $("#file-name2").text(this.files[0].name);
});