check dynamic childnod values

i'm trying to validate a form with dynamic elements. my form contains two text input for mobile and email. the user can add more fiels dynamicaly if its needed. the problem is i cant validate child values that made by appendchilds. here is the validator code:

function Checkchildlist(){
c = document.getElementById("mobiles").childNodes; 
     var txt = "";

    var i;
    for (i = 0; i < c.length; i++) {
        txt = txt + c[i].nodeName + "<br>";

        var mob= document.getElementById("mobile"+i).value;
        if(mob != "0937"){
            document.getElementById("mobile"+i).classList.remove("tru")
            document.getElementById("mobile"+i).classList.add("err")
        }else{
            document.getElementById("mobile"+i).classList.remove("err")
            document.getElementById("mobile"+i).classList.add("tru")    
        }


    }


 }

it just works on the first element. i tried many other ways but no success. cpmplete code is here:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
    .content-box{
        margin: auto 20px;
        border:solid 1px #1B50E1;
        width: 300px;
    }

    li{
        display: block;
        margin: 5px;
    }
    .tru{
        border:solid 3px #0E9609;
    }
    .err{
        border:solid 3px #F50D11;
    }

    </style>
<script language="javascript">
        var mobile=0;
function addfield(args){
if(args == "mobiles"){
    mobile++;
    var idcounter="mobile" + mobile;
}

    var x = document.createElement("li");
    x.id=idcounter;
    y=document.createElement("input");
    document.getElementById(args).appendChild(x);
    x.innerHTML="<input type=\"text\" id=\""+idcounter+"\" onblure=\"mobilecheck('"+idcounter+"')\" class=\"txtfield\" placeholder=\"mobile\">";
//  record ++;
}
 function Checkchildlist(){
c = document.getElementById("mobiles").childNodes; 
     var txt = "";

    var i;
    for (i = 0; i < c.length; i++) {
        txt = txt + c[i].nodeName + "<br>";

        var mob= document.getElementById("mobile"+i).value;
        if(mob != "0937"){
            document.getElementById("mobile"+i).classList.remove("tru")
            document.getElementById("mobile"+i).classList.add("err")
        }else{
            document.getElementById("mobile"+i).classList.remove("err")
            document.getElementById("mobile"+i).classList.add("tru")    
        }


    }


 }
    </script>


<div class="content-box">   
<form id="myform" action="index.php">
<ul>
<li>
    <input type="text" id="mobile0" name="mobile[]" placeholder="mobile number"><a href="#" onClick="addfield('mobiles')"><font class="char">&#43;</font></a>
    </li>
    <li id="mobiles"> </li>
<li>
        <input type="text" id="email" name="emails[]" placeholder="email"><a href="#" onClick="addfield('email')"><font class="char">&#43;</font></a>
    </li>
    <li>
        <input type="button" value="next" id="next" onClick="Checkchildlist()">
    </li>
    </ul>
</form>
    </div>
    <div id="show">

    </div>
</body>
</html>

Solution

Your problem is that you have duplicated id (li and inner input), so your document.getElementById("mobile"+i) check gets mixed up.

Correct code for adding new items (removed x.id=idcounter;):

function addfield(args) {
  if (args == "mobiles") {
    mobile++;
    var idcounter = "mobile" + mobile;
  }

  var x = document.createElement("li");
  y = document.createElement("input");
  document.getElementById(args).appendChild(x);
  x.innerHTML = "<input type=\"text\" id=\"" + idcounter + "\" onblure=\"mobilecheck('" + idcounter + "')\" class=\"txtfield\" placeholder=\"mobile\">";
  //  record ++;
}