Почему эта функция не работает? Отображается ошибка val of null

функция вызывается из модальной таблицы. а к телу таблицы обращается ajax. в этой таблице по две строки в каждой из двух текстовых полей. Его идентификаторы различны для каждой строки и каждого текстового поля. Я покажу свои коды ниже.

функция ajax - это

$(document).ready(function(){
    /////////////// Invoice Link Click ////////////////
    $("#invoice").click(function(){

        var rowID=[];

        ///////// Initialize and assign row row value /////////////
        rowID = arrays;
        var tempArrays='';
        for(i=0;i<arrays.length;i++){
        if (arrays[i]!=''){
            if (tempArrays!=''){
                tempArrays=tempArrays+','+arrays[i];
                }
            else{
                tempArrays=arrays[i];
                }


            }
        }

        alert("SUCCESS ALERT" +tempArrays);

        alert(typeof tempArrays);
        if (rowID!=''){
            $.ajax({
                url:'<?php echo base_url(); ?>index.php/Ajax_calls/invoicingFetch',
                type: 'POST',
                data:{tempArrays:tempArrays},

                success: function(data){

                    $('#newtest').html(data);
                    alert("SUCCESSFULLY RETURNED............!!!!!!!!");

                    }
                });

            }


        });
    }); 

ВКонтроллер AJAXФункция:

public function invoicingFetch(){
    if (isset($_POST['tempArrays'])){
            $output='';
            $postedVal=$this->input->post('tempArrays');
            $myArray = explode(',',$postedVal);

            $this->load->model('Ajax_model');
            $arrayLen=sizeof($myArray);
            for($i=0;$i<$arrayLen;$i++)
            {
                $arre=$myArray[$i];
                $records = $this->Ajax_model->getRawdataGDSSingle($arre);
                foreach($records as $row){
                    $saleid='sale'.$row->slno;
                        $marginid='margin'.$row->slno;
                    $output.='

                    <tr>
                        <td style = "text-align:center !important;"><input type = "checkbox" id = "'.$row->slno.'"  /> </td>
                        <td>'.$row->NAME.' </td>
                        <td>'.$row->TOTAL.' </td>
                        <td><input type = "text" id = "'.$saleid.'" name = "saleamount" onKeyPress = "UpdateMargin('.$saleid.','.$marginid.','.$row->TOTAL.')" onChange = "UpdateMargin('.$saleid.','.$marginid.','.$row->TOTAL.')" value = "'.$row->TOTAL.'" /> </td>
                        <td><input type = "text" id = "'.$marginid.'" name = "marginamount" onchange = "UpdateSale('.$marginid.','.$saleid.','.$row->TOTAL.')" value = "0"  /> </td>
                        <td>'.$row->BKD_BY.' </td>
                        <td> </td>
                        <td>'.$routing.' </td>
                        <td>'.$row->A2L.' </td>
                        <td>'.$row->TKT_NUMBER.' </td>
                    </tr>
                    ';
                    }
                }

            echo $output;  ///this output is the table body in modal
            }
     }

Всценарийв заголовке модальной страницы

function UpdateMargin(saleid,marginid,total){
    var sales=document.getElementById(saleid).value;
    //var margin=document.getElementById(marginid).value;
    var total=total;
    var salMargin=sales-total;
    document.getElementById(marginid).value=salMargin;
    }

ошибка, отображаемый в консоли,

Отображается ошибка как Uncaught TypeError: невозможно прочитать свойство val, имеющее значение null

Кто-нибудь мог сказать мне причину? почему это происходит? Заранее спасибо всем бриллиантам .....