I have a basic js table and I am having an issue getting the js file “tabless.js” to display in my HTML file. Here is my js file named “tabless.js”

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: ['copyHtml5']
        }
    },
    language: {
        buttons: {
            copyTitle: 'Ajouté au presse-papiers',
            copyKeys:
                'Appuyez sur <i>ctrl</i> ou <i>u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
            copySuccess: {
                _: '%d lignes copiées',
                1: '1 ligne copiée'
            }
        }
    }
});

And here is my HTML File

{% extends 'layouts/base.html' %}
{% load static %}
{% block extrastyle %}
    <link rel="stylesheet" href="{% static 'assets/css/plugins/style.css' %}">
{% endblock extrastyle %}

{% block content %}

    <!-- [ Main Content ] start -->
        <!-- account-section end -->
    <!-- Recent Orders start -->
    <div class="row">
    <!-- order-card start -->
    <div class="col-md-6 col-xl-4">
      <div class="card bg-c-blue order-card">
        <div class="card-body">
          <h6 class="text-white">Orders Received</h6>
          <h2 class="text-end text-white"><i class="feather icon-shopping-cart float-start"></i><span>486</span>
          </h2>
          <p class="m-b-0">Completed Orders<span class="float-end">351</span></p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-4">
      <div class="card bg-c-green order-card">
        <div class="card-body">
          <h6 class="text-white">Total Sales</h6>
          <h2 class="text-end text-white"><i class="feather icon-tag float-start"></i><span>{{ total_sales }}</span>
          </h2>
          <p class="m-b-0">This Month<span class="float-end">{{ total_sales7 }}</span></p>
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xl-4">
      <div class="card bg-c-yellow order-card">
        <div class="card-body">
          <h6 class="text-white">Revenue</h6>
          <h2 class="text-end text-white"><i class="feather icon-repeat float-start"></i><span>{{ total_rev }}</span></h2>
          <p class="m-b-0">This Month<span class="float-end">{{ total_rev7 }}</span></p>
        </div>
      </div>
    </div>
        <!-- [ basic-table ] start -->

        <div class="col-xl-12">
            <div class="card">
                 <div class="card-header">
                     <h5>Customer Orders</h5>
                 </div>
                 <div class="card-block table-border-style">
                     <div class="table-responsive">
                         <table class="table" id="example">
                               <tr>
                               <th>Customer</th>
                               <th>City</th>
                               <th>Service Type</th>
                               <th>Service Date</th>
                               <th>Phone Number</th>
                               <th>Amount</th>
                               <th>Completed</th>
                               <th>Previous Customer</th>
                               <th>Part Number</th>
                               <th>Quantity</th>
                               </tr>
                           {% for item, item2, item3, item4, item5, item6, item7, item8, item9, item10 in all_info2 %}
                               <tr>
                               <td>{{ item }}</td>
                               <td>{{ item2 }}</td>
                               <td>{{ item3 }}</td>
                               <td>{{ item4 }}</td>
                               <td>{{ item5 }}</td>
                               <td>{{ item6 }}</td>
                               <td>{{ item7 }}</td>
                               <td>{{ item8 }}</td>
                               <td>{{ item9 }}</td>
                               <td>{{ item10 }}</td>
                             </tr>
                           {% endfor %}
                         </table>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>


    <!-- Recent Orders end -->
        <!-- customer-section end -->
    <!-- [ Main Content ] end -->


{% endblock content %}


{% block extra_js %}

    <!-- Apex Chart -->
    <script src="{% static 'assets/js/plugins/apexcharts.min.js' %}"></script>
    <!-- custom-chart js -->
    <script src="{% static 'assets/js/pages/dashboard-sale.js' %}"></script>

    <script src="{% static 'assets/js/plugins/simple-datatables.js' %}"></script>
    <script>
        var dataTable = new simpleDatatables.DataTable("#pc-dt-dynamic-import");
        dataTable.import({
            type: "json",
            data: "{% static 'assets/json/datatable.json' %}"
        });
    </script>

    <script>
        var dataTable = new simpleDatatables.DataTable("#pc-dt-dynamic-import2");
        dataTable.import({
            type: "json",
            data: "{% static 'assets/json/datatable.json' %}"
        });
    </script>

    <script src="{% static 'assets/js/plugins/tabless.js' %}"></script>


{% endblock extra_js %}

My main question is, do I use the name from the js file “example” and is that the name I use in my HTML file for the table id? Right now when I load the page I get the table but I do not get the actual js that should show me a “Copy” button