JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Adjust Pricing and Confirm</h3>
    </div>
    <div class="card-body">
        <div class="overlay overlay-block card-rounded">
            <div class="overlay-wrapper p-5">
                <!-- begin:: Service Pricing Table -->
                <div class="fv-row mb-10">
                    <div id="current-service-pricing-div">
                        <table id="current-service-pricing" class="display table table-striped border" style="width:100%; border-collapse:separate;"></table>
                    </div>
                </div>
                <!-- end:: Service Pricing Table -->

                <!--begin::Form-->
                <form class="form" id="add-service-final">
                    
                    <button id="add-service-final-button" class="btn btn-success hover-scale">Add Service</button>
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
</div>

JavaScript

const currency_formatter = new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
    });
    var form;
    var formSubmitButton;
    var hourly_rate = {'hourly_rate_min': 288.75, 'hourly_rate_target': 315.0};
    var service_list = [{'name': 'Bobs Widget', 'hours': 42.55, 'min_price': 12286.3125, 'target_price': 13403.25, 'sale_price': 13403.25}, {'name': 'Repair Kit', 'hours': 13.65, 'min_price': 3941.4375, 'target_price': 4299.75, 'sale_price': 4299.75}];
    var handleForm = function() {
        //formSubmitButton.addEventListener('click', function (e) {
            //formSubmitButton.removeAttribute('data-kt-indicator');// Enable button
            //formSubmitButton.disabled = false;

            // form.submit();
        //});
    };

    $(document).ready(function() {

         var serviceTable = $('#current-service-pricing').DataTable({
            data: service_list,
            searching: false,
            paging:false,
            language: {
                "emptyTable": "There are currently no services listed."
            },
            columns: [
                {
                    title: "Product",
                    orderable: true,
                    data: 'name',
                },
                {
                    title: "Min Price",
                    orderable: false,
                    data: 'min_price',
                    render: function ( data, type, row, meta ) {
                        return currency_formatter.format(data)
                    },
                },
                {
                    title: "Adjustments",
                    orderable: true,
                    render: function ( data, type, row, meta ) {
                        var data_render = '<input type="range" max=' + row.target_price;
                        data_render += ' min=' + row.min_price + ' step=50 value=' + row.target_price;
                        data_render += ' class="form-control"';
                      ...