Problems adding and removing items from selection list

[taypandt]

I've been trying to make a web page that has a drop-down list of items to be bought, which, when selected, are added to another selection box on the page. Once in that box, I want the user to be able to select the item again to remove it if they'd like. I also want the page to add up the prices of each item to be purchased to display a total amount due.

Right now the functions works while adding the items initially, and it works while removing them, but I have problems when I try to add another item after having removed one or more. I keep messing with this code and it's like this big gnarly monster now which could probably be simplified a lot, and since it's kind of confusing I tried to be really descriptive in what's going on.

The function codes:

var itemArray = []; //holds the names of the items selected
var receiptArray = []; //holds the price values of the items selected
var priceArray = ["$1.00", "$2.00", "$3.00", "$4.00", "$5.00"];//holds the string value of the prices for printing purposes
var priceValue = [1, 2, 3, 4, 5]; //holds the numeric values of prices for adding purposes
var itemTotal=0;
var count = 0;
function addItem() {
        if (document.getElementById('itemList').value == "")
            window.alert("You must choose at least one item to purchase.");
        else {
            var dd1 = document.getElementById('itemList');
            itemArray.push(dd1.options[dd1.selectedIndex].text); //adds selected item from drop down list to itemArray
            var partReceipt = " .";
            for (var i =0; i<(30 - itemArray[count].length); i++)
                partReceipt += " ."; //just for formatting purposes, creates line of periods in between item name and price when printed
            var receipt = (itemArray[count] + partReceipt + priceArray[dd1.selectedIndex - 1]); //creates string like "item name. . . . .$X.XX"
            receiptArray.push(priceValue[dd1.selectedIndex-1]);
            document.forms[0].buyTotal.value=((itemTotal += priceValue[dd1.selectedIndex - 1]).toFixed(2)); //adds the price of selected item to total price
            document.forms[0].buyList.options[count]=new Option(receipt, itemArray[count++]);//adds the selected item's text to the selection box
            }
        }			
function removeItem() {
    var ridItem = document.getElementById('buyL');
    if (ridItem.value == "")
        window.alert("You must choose at least one item to remove.");
    else {
        receiptArray.splice(ridItem.selectedIndex, 1);//removes the numeric price value corresponding with the selected item
        itemTotal = 0;
        for(var i = 0; i < receiptArray.length; i++){
            itemTotal += receiptArray[i];
        }//adds the remaining numeric values 
        itemTotal = itemTotal.toFixed(2);
        document.forms[0].buyTotal.value=(itemTotal);
        ridItem.remove(ridItem.selectedIndex);//removes selected item's text from selection box
        itemArray.splice(ridItem.selectedIndex, 1);//removes selected item's name from selection box 
    }
    count = count-1; 
}

and the corresponding drop-down list and box on the page which use them:

<select id="itemList">
        <option value="" style="display:none;"></option>
        <option value="title one">Title One</option>
        <option value="title two">TitleTwo</option>
        <option value="title three">Title Three</option>
        <option value="title four">Title Four</option>
        <option value="title five">Title Five</option>
        </select>
<p>
 <select id = "buyL" name = "buyList" multiple = "multiple" size = "10" style = "width: 500px">
  <option value = "none">Items to be purchased</option>
 </select></p>//box where added items are listed
 
 <p><input type = "button" value = "Add Item" onclick = "addItem();" style = "width: 120px" /> &nbsp&nbsp&nbsp Total: 
  <input type="text" name = "buyTotal" size = "2" style = "width: 70px"/></p>//box for displaying total price
  
  <p><input type = "button" value = "Remove Item" onclick = "removeItem();" style = "width: 120px" /></p>

When I try to add more items after having removed some, none will show up on the list, though the price will change (but only after removing another item do the new additions show up). If anyone can help me make sense of this, I'd really appreciate it.