Content disappears after user finishes entering groceries
<p>Happy new year, everyone!  I'm celebrating by working on learning jquery. I added some jQuery to my code below and managed to add some content and change some css with it. The getGroceries function is working fine and is doing what it's supposed to do. When the user finishes entering the groceries, the program (printGroceries) is supposed to print the list that the user entered. That portion is also working.... HOWEVER, when that happens, the program removes the header (My grocery list) and removes all styling. </p>

<p>What am I doing wrong? </p>

<p>EDITED CODE: Deleted full code and added the portion that I changed (commented the old). </p>

<pre><code>function printGroceries(groceryItems) {

if (groceryItems.length &gt; 1) {
    $('grocery-list').html('&lt;ol class="items" id="list-items"&gt;');
    //document.write("&lt;ol&gt;");
    for(x=0; x &lt; groceryItems.length;x++){
    groceryItems;
    $('#list-items').prepend('&lt;li&gt;' + groceryItems[x] + '&lt;/li&gt;');
    //document.write("&lt;li&gt;" + groceryItems[x] + '&lt;/li&gt;');
    }
    $('#grocery-list').append('&lt;/ol&gt;');
    //document.write("&lt;/ol&gt;");
} else {
    $('#grocery-list').prepend('&lt;p&gt;Sorry, your list is empty.&lt;/p&gt;');
    //document.write('&lt;p&gt;Sorry, your list is empty.&lt;/p&gt;');
}
}
</code></pre>

<p>Problem: <a href="http://jsfiddle.net/arunpjohny/vbJpG/" rel="nofollow">fiddle</a></p>
