Using JQuery in Laravel to create sortable table - laravel

Question

I am new to Laravel and trying to create a simple sortable table using JQuery.
I have the following in my view:
<table id="dtBasicExample" class="table">
<thead>
<tr>
<th scope="col">Submission ID</th>
<th scope="col">Advisor ID</th>
<th scope="col">Advisor Name</th>
<th scope="col">Advisor Email</th>
<th scope="col">Link</th>
<th scope="col">Employer Name</th>
<th scope="col">Received Date</th>
<th scope="col">Plan Renewal Date</th>
<th scope="col">Status</th>
<th scope="col">Copy</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
#foreach($plans as $plan)
<tr>
<td> {{$plan->id}}</td>
<td> {{$plan->advisor_id}}</td>
<td> {{$plan->advisor->name}}</td>
<td> {{$plan->advisor->email}}</td>
<td>Click Here</td>
<td>{{$plan->employer_name}}</td>
<td>{{$plan->updated_at}}</td>
<td>{{$plan->medical_plan_renewal_date}}</td>
<td>{{$plan->status}}</td>
<td>Copy</td>
<td>Delete</td>
#endforeach
</tr>
</tbody>
</table>
I have the following in my app.js file:
$(document).ready(function() {
$("#dtBasicExample").DataTable();
$(".dataTables_length").addClass("bs-select");
});
I have the following in my app.css file:
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
bottom: .5em;
}
I imagine I am wrong on where to put the JS and/or CSS. My understanding is the bootstrap.js file pulls in JQuery and the app.js file pulls in the bootstrap.js file. Also, my app.css (in public folder) is highlighted red when I open it.