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>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table id="example" class="display 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"...

JavaScript

jQuery(document).ready(function () {
    if (jQuery('#example').length) {
  var table = $('#example').DataTable({
    columnDefs: [
      {  targets: 3,
         render: function (data, type, row, meta) {
            return '<input type="button" class="name" id=n-"' + meta.row + '" value="Name"/><input type="button" class="salary" id=s-"' + meta.row + '" value="Salary"/>';
         }
 
      }
    ]
  });
   
$('#example tbody').on('click', '.name', function () {
  var id = $(this).attr("id").match(/\d+/)[0];
  var data = $('#example').DataTable().row( id ).data();
  console.log(data[0]);
});
   
   
$('#example tbody').on('click', '.salary', function () {
  var id = $(this).attr("id").match(/\d+/)[0];
  var data = $('#example').DataTable().row( id ).data();
  console.log(data[5]);
});
    }

});



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') == "") {
           ...