HTML SlectBox Values alignment from CheckBox


Hi, Can somebody look below code to see why I am not able to print values in line by line.
Now it printing all in one line.

Below is the working code :

<%@page pageEncoding="Cp1252" contentType="text/html; charset=Cp1252" %>
<meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/>
<script type="text/javascript">

function printit() {

	var prodElement = document.getElementById('movefruitdrink');
	var value = " ";

  for(var i = 0;i<document.myform.fruit.length;i++){
			value = value + document.myform.fruit[i].value +"\
	prodElement.options[document.myform.fruit.length] = new Option(value,value);
    //document.getElementById("print").innerHTML = value;

		<form name="myform">
			Check all Favorite Fruits and Drinks : <br>
			Select Fruits : <br>
			<input TYPE=checkbox name=fruit VALUE=apples onclick="printit()"> Apples <BR>
			<input TYPE=checkbox name=fruit VALUE=grapes onclick="printit()"> Grapes <BR>
			<input TYPE=checkbox name=fruit VALUE=oranges onclick="printit()"> Oranges <BR>
			<input TYPE=checkbox name=fruit VALUE=melons onclick="printit()"> Melons <BR>
			Select Drinks : <br>
			<input TYPE=checkbox name=fruit VALUE=coke onclick="printit()"> Coke <BR>
			<input TYPE=checkbox name=fruit VALUE=pepsi onclick="printit()"> Pepsi <BR>
			<input TYPE=checkbox name=fruit VALUE=Dr.Pepper onclick="printit()"> Dr.Pepper <BR>
			<input TYPE=checkbox name=fruit VALUE=sprite onclick="printit()"> Sprite <BR>
			<div id="print"></div>
			List Box : <br>
			<select  name="movefruitdrink" id="movefruitdrink" multiple="multiple" size="10">
							<!-- Will be added dynamically -->

I need output like below : if you select check box.
I don't wanlt like : applesgrapesoranges......etc


I see that you're wanting to add them dynamically to the select list.
There's a useful tutorial on doing this at