Chonathun

I'm a beginner learning JavaScript course. Not sure this is the right place to post this topic or not. Please bear with me. I have a little project in mind. I want to do somthing like this: <div id="typingfield" class="lightgreybackground"> <p> <cha>0</cha> <cha>1</cha> <cha>2</cha> ... <cha>38</cha> <cha>39</cha> </p> </div> using this: <div id="typingfield" class="lightgreybackground"> </div> <script type="text/javascript"> var para = document.createElement("p"); var cha = document.createElement("cha"); var element = document.getElementById("typingfield"); element.appendChild(para); var text; var node; for (i = 0; i < 40 ; i++){ para.appendChild(cha); for (i = 0; i < 40 ; i++){ node = document.createTextNode(i); cha.appendChild(node); } } </script> but I got this: <div id="typingfield" class="lightgreybackground"> <p><cha>0123456789101112131415161718192021222324252627282930313233343536373839</cha></p></div> Please give me some guidance. Regards, Chonathun