Forward_Station_Server/api/v1/Customers/vehiclesDetails.php

<button class="btn btn-primary" onclick="document.getElementById('addVForm').style.display = 'block';document.getElementById('addForm').style.display = 'none';document.getElementById('editForm').style.display = 'none';document.getElementById('editVForm').style.display = 'none';document.getElementById('deleteForm').style.display = 'none';document.getElementById('deleteVForm').style.display = 'none';"> Add Vehicle </button>
<table id="vehicle" class="table display table-striped table-bordered table-hover table-sm" cellspacing="0" width="100%">
      <thead>
        <tr style="color:white;">
            <th colspan="1" style="background: #5d8a4c;">Customer</th>
            <th style="background: #5d8a4c;font-family:'Lobster', helvetica,;" colspan="3" ><?php echo $_COOKIE['customerName']; ?></th>
        </tr>
        <tr>
          <th></th>
          <th></th>
          <th>Id</th>
          <th>Number</th>
        </tr>
      </thead>

        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th>Id</th>
                <th>Number</th>
            </tr>
        </tfoot>
    </table>


<script type="text/javascript">
$(document).ready(function() {
    var table = $('#vehicle').DataTable( {
        "buttons": true,
        "ajax": "api/v1/Customers/vehicles.txt",
        "columns": [
            {
                "className":      'delete',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Delete'
            },
            {
                "className":      'edit',
                "orderable":      false,
                "data":           null,
                "defaultContent": 'Edit'
            },
            { "data": "Id" },
            { "data": "Number" }
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#vehicle tbody').on('click', 'td.delete', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var number = row.data()['Number'];
        var vehicleid = row.data()['Id'];
        var id = row.data()['Customer_Id'];
        
        document.getElementById('deleteVid').value = vehicleid;

        document.getElementById('deleteVForm').style.display = 'block';
        document.getElementById('editVForm').style.display = 'none';
        document.getElementById('addVForm').style.display = 'none';
        document.getElementById('editForm').style.display = 'none';
        document.getElementById('addForm').style.display = 'none';
        document.getElementById('deleteForm').style.display = 'none';
    } );

        // Add event listener for opening and closing details
    $('#vehicle tbody').on('click', 'tr td.edit', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        var vehicle_id = row.data()['Id'];
        var number = row.data()['Number'];

        document.getElementById('vehicle_id').value = vehicle_id;
        document.getElementById('number').value = number;

        document.getElementById('editVForm').style.display = 'block';
        document.getElementById('addVForm').style.display = 'none';
        document.getElementById('deleteVForm').style.display = 'none';
        document.getElementById('editForm').style.display = 'none';
        document.getElementById('addForm').style.display = 'none';
        document.getElementById('deleteForm').style.display = 'none';
    } );

} );
</script>