JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table id="example" class="display table-responsive table" style="width:100%">
        <thead>
            <tr>
                <th>image</th>
                <th>product name</th>
                <th>product price</th>
                <th>actions</th>
            </tr>
        </thead>
 
<tbody>
            <tr>
                <td>image url src</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><div class="quantity">
                <label class="screen-reader-text" for="quantity_62fc8d4d64439"></label>
        <input type="number" id="quantity_62fc8d4d64439" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="تعداد" size="4" placeholder="" inputmode="numeric">
            </div></td>
            </tr>
            <tr>
                <td>image url src</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><div class="quantity">
                <label class="screen-reader-text" for="quantity_62fc8d4d64439"></label>
        <input type="number" id="quantity_62fc8d4d64439" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1"  size="4" placeholder="" inputmode="numeric">
            </div></td>
            </tr>
    </table>
</body>
</html>

JavaScript

jQuery(document).ready(function () {
    if (jQuery('#example').length) {
        jQuery('#example').DataTable({
            responsive: true,
            paging: true,
            searching: true,


            "initComplete": ttt




            ,
            columns: [
                { data: 'product_img' },
                { data: 'product_name' },
                { data: 'product_price' },
                { data: 'product_actions' },
            ]
        });
    }

});



function ttt() {
    let qiit = jQuery('.quantity input.input-text');

    qiit.each(function () {
        jQuery(this).wrap('<div class="tarashop-custom-num"></div>');
        jQuery(this).before('<span class="dtb-minus-qty"><i class="fas fa-minus"></i></span>');
        jQuery(this).after('<span class="dtb-plus-qty"><i class="fas fa-plus"></i></span>');
        jQuery(this).parents('.quantity').addClass('datatable-custom-qty');
        jQuery(this).show();
    });

    jQuery(document).on('click', '.dataTable .quantity .dtb-minus-qty', function () {
        let inputT = jQuery(this).parent().find('input.input-text');
        if (parseInt(inputT.val()) > parseInt(inputT.attr('min'))) {
            jQuery(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', (parseInt(inputT.val()) - 1));
            inputT.attr('value', (parseInt(inputT.val()) - 1));
            inputT.change();
        }

    });
    jQuery(document).on('click', '.dataTable .quantity .dtb-plus-qty', function () {
        let inputT = jQuery(this).parent().find('input.qty');
        if (parseInt(inputT.val()) < parseInt(inputT.attr('max')) || inputT.attr('max') == "") {
            jQuery(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', (parseInt(inputT.val()) + 1));
            inputT.attr('value', (parseInt(inputT.val()) + 1));
            inputT.change();
        }

    });
}