Iterate string array error, runs for first item's letters

Question

I have a simple array loop, runs perfect in jsFiddle showing all items, see https://jsfiddle.net/8odoros/b27ocs4d/1/

What's strange is that putting the same script here as a snippet runs by letter, showing the first string letter by letter. I feel stupid, am I missing something? Check it out:

var name = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

Answer 1

Word name is a reserved word (as @prasad answered) in javascript that why your code was not working as expected.

See below code, after changing name with names. Its seems working as was working in jsfiddle.

var names = ['Helen','Jim','Thomas','Luke','Theodore'];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
	var newHtml = names[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}

<div id="cards"></div>

Note: name can only be used as local variable inside a function or iife and can not used as global varibale.

Answer 2

Try any one of the function its working. name is reserved word of javascript.But applied with in function .Its not act as a reserved word.This is one of the way preventing the action.

(function () {
var name = ["Helen","Jim","Thomas","Luke","Theodore"];
var div = document.getElementById('cards');
for(var i=0;i<5;i++){
  var newHtml = name[i]+'&emsp;'+i+'</br>';
	div.innerHTML = div.innerHTML + newHtml;  	
}
  })()

<div id="cards"></div>