Como hacer esta funcion dinamica con un loop for en jquery

Question

Lo que necesito es que al momento de seleccion una fraccion se multiplique este valor con el precio y en total de venta se muestre el total de la multiplicacion . pero no logro poder realizarlo

function mostrar_productos(){
    
              $.ajax({
                      type  : 'ajax',
                  url   : '<?php echo site_url('Cproductos/get_productos')?>',
                  async : false,
                  dataType : 'json',
                  success : function(data){
                  var html = '';
                  var i;
                  for(i=0; i<data.length; i++){
                  html += '<tr>'+
                    '<td>'+data[i].descripcion+'</td>'+
                    '<td>'+'<span id="sp_precio'+i+'"">'+data[i].precio+'</span>'+'</td>'+ 
                    '<td>'+'<input type="number" class="form-control col-4" id="txtfraccion'+i+'" name="txtfraccion'+i+'" min="1" pattern="^[0-9]+">'
                    +'</td>'+ 
                    '<td>'+'<span id="sp_total'+i+'"></span>'+'</td>'+'</tr>';
    
                  }
                  $('#show_prod').html(html); 
    
                  //data contain 5 records
                 for(i=0; i<data.length; i++){
    
                  $('#txtfraccion' + i).on('input', function(e){
                  $('#sp_total' + i).text($(this).val());
                  });
    
                  }
               }
    
              });
                  }