Динамический HTML5 Datalist

Итак, у меня возникла небольшая проблема, связанная с тем, что мой динамик HTML5 динамически заполняется из массива javascripi, который заполняется из значений ключа объекта, который заполняется через строки в базе данных MySQL. Уф!

База данных MySQL = > Таблица = > Строки = > JSON = > Объекты Javascript = > "firstname" и "lastname" key = > Массив с именами = > Параметры Datalist.

Я успешно создал массив имен:

var nameArray = ["Rick Bross","Madison Smith","Jack Johnson"]; //Example of my array

И настройте цикл для .append их в datalist:

for (var i = 0; i < nameArray.length; i++) {
    alert(i + " - " + nameArray[i]); //Works Fine, "0 - Rick Bross", "1 - Madison Smith", etc.
    $('#potentials').append("<option value='" + nameArray[i] + ">"); // Not working.
}

Вот мой HTML:

<input tabindex='1' list="potentials" type="text" placeholder="First &amp; Last Name" id="name" name="name"></input>
<datalist id="potentials">
</datalist>

Кто-нибудь знает, почему это не заполняется?