Why is this jquery code not working as I expect?
<p>Here is the HTML:</p>

<pre><code>&lt;input type="text" id="name" /&gt;&lt;input type="button" id="insert" value="Insert" /&gt;
&lt;div id="display_list"&gt;&lt;/div&gt;
</code></pre>

<p>And here is the jQuery code:</p>

<pre><code>$(document).ready(function() {
    function display() {
        $('#display_list').text('');
        $.each(names, function(index, value) {
            $('#display_list').append(index + 1 + '. ' + value + '&lt;br/&gt;');
        });
    }
    var names = ['cow', 'alex', 'ram'];
    display();
    $('#insert').click(function() {
        var name = $('#name').val();
        names.push(name);
        display();
    });
});
</code></pre>

<p>The problem is it is showing </p>

<ol>
<li>cow</li>
<li>alex</li>
<li>ram</li>
</ol>

<p>at first , but when I type something at input and click insert box, it is not showing any value but incremented index numbers, something like this:</p>

<ol>
<li>cow</li>
<li>alex</li>
<li>ram</li>
<li>
<ol>
5. 
</ol></li>
</ol>
