How to get status by add rows dynamic in javascript

Question

I want ask about rows dynamic in javascript. I should input the value into field result, and then the field status will automation fill pass or fail. But when I added the second rows, I can input the value of result but the field status cannot seen the pass or fail

Here the image

Here the codjavascript

  // Run the check every time a key is pressed in an input
            let allInputs = document.querySelectorAll("input");
            allInputs.forEach(function(elem) {
                elem.addEventListener("keyup", function() {
                sum_method();
                });
            });

            // Run the check
            function sum_method() {
                // console.log('sum_method');
                var result = document.querySelector('[name="result"]').value;
                var value_from = document.querySelector('[name="value_from"]').value;
                var value_to = document.querySelector('[name="value_to"]').value;

                // console.log('result:', result, 'value_from:', value_from, 'value_to:', value_to);
            
                var result1 = parseInt(value_from) <= parseInt(result);
                var result2 = parseInt(value_to) >= parseInt(result);
                
                // console.log('result1', result1, 'result2', result2);

                if (result1 == true && result2 == true) {
                    document.querySelector('[name="status"]').value = 'pass';
                } else {
                    document.querySelector('[name="status"]').value = 'fail';
                }
            }

Here the html

<tr class="row-keranjang-method">
        <td class="method_code">
            <input type="hidden" name="id_testmatrix_hidden[]" value="<?= $this->input->post('id_testmatrix')?>">
            <p style="color:blue;"><?= $this->input->post('method_code') ?></p>
            <input type="hidden" name="method_name_hidden[]" value="<?= $this->input->post('method_name')?>">
            <p><?= $this->input->post('method_name') ?></p>
            <input type="hidden" name="method_code_hidden[]" value="<?= $this->input->post('method_code')?>">
        </td>
        <td>
            <p>value from : <strong><input class="value_from" name="value_from" value="<?= $this->input->post('value_from') ?>" style="width: 4%;" disabled></strong>
            to<strong><input class="value_to" name="value_to" value="<?= $this->input->post('value_to') ?>" style="width: 4%;" disabled></strong></p>
            <p><?= $this->input->post('measurement') ?></p>
            <input type="hidden" name="measurement_hidden[]" value="<?= $this->input->post('measurement')?>">  
        </td>
        <td style="width: 10%;"><input class="form-control result" name="result" style="align: middle;" onkeyup="sum_method();"></td>
        <td style="width: 10%;"><input name="status" class="status" disabled></td>
        <td style="width: 10%;"><center>
            <button type="button" class="btn btn-lg btn-danger" id="hapus_method" data-nama-method="<?= $this->input->post('method_name')?>"><i class="fa fa-trash"></i></button>
        </td>
    </tr>

Button below for add the rows

 <div class="col-md-2 pl-pr-1 form-group">
                    <label>&nbsp;</label>
                    <button type="button" class="btn btn-primary btn-block" name="tambahshrinkage" id="tambahshrinkage" disabled><i class="fa fa-plus"></i>&nbsp;&nbsp;add</button>
                </div>

Answer 1

querySelector only returns the first match. You don't need both addEventListener and an onkeyup= attribute on the input.

You could add an argument to the sum_method function to tell it which input is calling it:

        <input class="form-control result" name="result" style="align: middle;" onkeyup="sum_method(this);">

Then using that input, find it's parent's parent (the tr element), and find the named inputs from there.

            // Note I've removed the addEventListener logic
            // because your inputs already have onkeyup=
            // Run the check
            function sum_method(inputEl) {
                const row = inputEl.parentElement.parentElement;
                var result = row.querySelector('[name="result"]').value;
                var value_from = row.querySelector('[name="value_from"]').value;
                var value_to = row.querySelector('[name="value_to"]').value;

                console.log('result:', result, 'value_from:', value_from, 'value_to:', value_to);
            
                var result1 = parseInt(value_from) <= parseInt(result);
                var result2 = parseInt(value_to) >= parseInt(result);
                
                console.log('result1', result1, 'result2', result2);

                if (result1 == true && result2 == true) {
                    row.querySelector('[name="status"]').value = 'pass';
                } else {
                    row.querySelector('[name="status"]').value = 'fail';
                }
            }

Hope this helps! If you're still having trouble, please share any error messages from the console, or describe the issue you're seeing.