使用循环时如何添加？

I have created a code that adds input values and display the result in the third input box but the result is always Nan, how to solve this?

<?php
    for ($i=0; $i < 5 ; $i++) { 
    ?>
    <input type="number" name="" id="pop<?php echo $i; ?>" >
    <input onKeyup="su<?php echo $i; ?>();" type="number" name="" id="ta<?php echo $i; ?>">
    <input type="number" name="" id="display<?php echo $i; ?>">
    <br>
    <script>
    function su<?php echo $i; ?>(){
        var x = document.getElementById("pop<?php echo $i; ?>");
        var y = document.getElementById("ta<?php echo $i; ?>");
        var sum;
        if (y != ''){
            sum = parseFloat(x + y);
            document.getElementById("display<?php echo $i; ?>").value = parseFloat(x + y);       
        }
    }
    </script>
    <?php
    }
?>

You need to get the value from the pop and ta and add those, NOT the elements themselves. SEE:

function su<?php echo $i; ?>(){
    var x = parseFloat(document.getElementById("pop<?php echo $i; ?>").value); // HERE
    var y = parseFloat(document.getElementById("ta<?php echo $i; ?>").value); // HERE
    var sum;
    if (y != ''){
        sum = parseFloat(x + y);
        document.getElementById("display<?php echo $i; ?>").value = x + y;       
    }
}
</script>

Change these 2 lines.

Before:

var x = document.getElementById("pop<?php echo $i; ?>");
var y = document.getElementById("ta<?php echo $i; ?>");

After:

var x = document.getElementById("pop<?php echo $i; ?>").value;
var y = document.getElementById("ta<?php echo $i; ?>").value;

Can not create dynamic function.

Pass dynamic value to the function.

PHP

<?php
    for ($i=0; $i < 5 ; $i++) { 
    ?>
    <input type="number" name="" id="pop<?php echo $i; ?>" >
    <input onKeyup="su(<?php echo $i; ?>);" type="number" name="" id="ta<?php echo $i; ?>">
    <input type="number" name="" id="display<?php echo $i; ?>">
    <br />
    <?php
    }
?>

Javascript

function su(id){
    var x = document.getElementById("pop"+id);
    var y = document.getElementById("ta"+id);
    var sum;
    if (y != ''){
        sum = parseFloat(x + y);
        document.getElementById("display"+id).value = parseFloat(x + y);       
    }
}