I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it.
Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right?

HTML Form:
Code:
<form>
			<table>
				<th>Recipe Quick Search</th>
				<tr>
					<td class="quickSearchHeader">Ingredient:</td>
				</tr>
				<tr>
					<td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td>
				</tr>
				<tr>
					<td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td>
				</tr>
				<tr>
					<td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td>
				</tr>
				<tr>
					<td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td>
				</tr>
			</table>
			</form>
Javascript Code:
Code:
<script type="text/javascript">

 var array = new Array();

  function insert(val)
  {
	if(val != "")
	{
		array.push(val);
	}
  }

  function show()
  {
  if(array.length > 0)
	{
		for(i = 0; i < array.length; i++)
		{
		document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
		}
	}

  }

</script>