javascript TypeError: x.data is not a function

I am not sure what to use.. I have tried attribute and attr, so then I tried data.. Any suggestions would greatly be appreciated.

<script type='text/javascript'>//<![CDATA[
//window.onload=function(){
function loadmath() {
//var x = document.getElementById("x");
//var y = document.getElementById("y");


var form = document.getElementById('form4');
var chks = form.querySelectorAll('input[type="text"]');
var checked = [];
    for(var i = 0; i < chks.length; i++){

var x = document.getElementsByName("x"[i]);
var y = document.getElementsByName("y"[i]);

//var d = document.getElementById("d");
var d = document.getElementsByName("d"[i]);


//var d = document.getElementById("d1");

    }
var xstored = x.data("data-in");
var ystored = y.data("data-in");
   
       
        setInterval(function(){
    if( x == document.activeElement ){
     var temp = x.value;
     if( xstored != temp ){
       xstored = temp;
       x.setAttribute("data-in",temp);
       calculate();
     }
    }
    if( y == document.activeElement ){
     var temp = y.value;
     if( ystored != temp ){
       ystored = temp;
       y.setAttribute("data-in",temp);
       calculate();
     }
    }
},50);

function calculate(){
d.innerHTML = x.value * y.value;
}
x.onblur = calculate;
calculate();

}//]]> 

</script>

<form id="form4" name="form4" method="post" action="">

<input id="x" name="x[]" data-in="" type="text" /><br>
*<input id="y" name="y[]" data-in="" type="text" onkeypress="loadmath()"/><br>
<hr>
<div id="d" name="d[]"  ></div>

</form>

Code (markup):

 

If this helps any.. Here is my other page. I have at least 4 spots where I do math..

And here is my original javascript.

<script type='text/javascript'>//<![CDATA[
//window.onload=function(){
function loadmath() {
var x = document.getElementById("x");
var y = document.getElementById("y");
var d = document.getElementById("d");
var xstored = x.getAttribute("data-in");
var ystored = y.getAttribute("data-in");
setInterval(function(){
    if( x == document.activeElement ){
     var temp = x.value;
     if( xstored != temp ){
       xstored = temp;
       x.setAttribute("data-in",temp);
       calculate();
     }
    }
    if( y == document.activeElement ){
     var temp = y.value;
     if( ystored != temp ){
       ystored = temp;
       y.setAttribute("data-in",temp);
       calculate();
     }
    }
},50);

function calculate(){
d.innerHTML = x.value * y.value;
}
x.onblur = calculate;
calculate();

}//]]> 

</script>

Code (markup):

Other page where javascript loads \/

<input id="x" data-in="" type="text" /><br>
*<input id="y" data-in="" type="text" onkeypress="loadmath()"/><br>
<hr>
<div id="d"></div>



<input id="x" data-in="" type="text" /><br>
*<input id="y" data-in="" type="text" onkeypress="loadmath()"/><br>
<hr>
<div id="d"></div>


<input id="x" data-in="" type="text" /><br>
*<input id="y" data-in="" type="text" onkeypress="loadmath()"/><br>
<hr>
<div id="d"></div>


<input id="x" data-in="" type="text" /><br>
*<input id="y" data-in="" type="text" onkeypress="loadmath()"/><br>
<hr>
<div id="d"></div>

Code (markup):

 

I figured this out. I ended up having some extra spaces and extra keys.