How to implement the custom table function of clicking to add data in dcat admin?

<div class="box">
    <div>
        ID:<input type="text" id="idInput">
        <button id="addButton">Add to</button>
    </div>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>quantity</th>
                <th>color</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

 document.getElementById('addButton').addEventListener('click', function() {
    const id = document.getElementById('idInput').value;
    if (id) {
        axios.get('/your-api-endpoint/' id)
            .then(response => {
                addRowToTable(response.data);
            })
            .catch(error => {
                console.error('Error:', error);
                // Handle errors, such as displaying error prompt information});
    }
});

function addRowToTable(data) {
    const tableBody = document.getElementById('dataTable').querySelector('tbody');
    const newRow = tableBody.insertRow();

    const idCell = newRow.insertCell();
    const quantityCell = newRow.insertCell();
    const colorCell = newRow.insertCell();

    idCell.textContent = data.id; // Assume that the data returned by the backend contains the id field quantityCell.innerHTML = `<input type="number" value="1"> `; // Add quantity input box colorCell.innerHTML = `<select><option value="red"> red</option>
<option value="blue"> blue</option></select> `; // Add color selector}

 <?php namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\YourModel; // Replace with your data model class YourController extends Controller
{
    public function getData(Request $request, $id)
    {
        $data = YourModel::find($id); // Get data from the database and adjust it according to your model if ($data) {
            return response()->json($data);
        } else {
            return response()->json(['error' => 'Data not found'], 404);
        }
    }
}

 Route::get('/your-api-endpoint/{id}', [\App\Http\Controllers\Admin\YourController::class, 'getData']);