JSFiddle - React, Tailwind, and code Playground

by Norelys Rumbos

HTML

<div class="box-body">
  <table id="transactional-channels" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Canales / Transacciones</th>
        <th id="aqui">Pagos de clientes</th>
        <th>Entregas a clientes</th>
        <th>Gariantías, Quejas e Información a clientes</th>
        <th>Ventas</th>
        <th>Otras Transacciones</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Web</td>
        <td>
          <input id="transactional_channel_payment_web" class="form-control field_percentage" type="number" name="transactional_channel[payment][web]" max="100" min="0" step="0.01" value="1110">
        </td>
        <td>
          <input id="transactional_channel_delivery_web" class="form-control field_percentage" type="number" name="transactional_channel[delivery][web]" max="100" min="0" step="0.01" value="">
        </td>
        <td>
          <input id="transactional_channel_information_web" class="form-control field_percentage" type="number" name="transactional_channel[information][web]" max="100" min="0" step="0.01" value="">
        </td>
        <td>
          <input id="transactional_channel_sales_web" class="form-control field_percentage" type="number" name="transactional_channel[sales][web]" max="100" min="0" step="0.01" value="">
        </td>
        <td>
          <input id="transactional_channel_other_web" class="form-control field_percentage" type="number" name="transactional_channel[other][web]" max="100" min="0" step="0.01" value="">
        </td>
      </tr>

      <tr>
        <td>Móvil</td>
        <td>
          <input id="transactional_channel_payment_mobile" class="form-control field_percentage" type="number" name="transactional_channel[payment][mobile]" max="100" min="0" step="0.01" value="">
        </td>
        <td>
          <input id="transactional_channel_delivery_mobile" class="form-control field_percentage" type="number" name="transactional_channel[delivery][mobile]" max="100" min="0"...

JavaScript

$('#aqui').click(function() {
    $(this).css("color", "red");
  });

	var maximun = [100, 100];
  var channels = ["web","mobile"];
  var columns = ["payment", "delivery", "information", "sales", other];
  
  function obtener_valores(){
  	$.each(channels, function(index_max, val_channel){
    	$.each(colums, function(index_col, val_column){
      	var input_search = "input[name='trasnsactional_channel["+val_column+"]["+val_channel+"]']";
      });    
    });
  
  };