I can't see that happening. This code seems to work OK (only has the 300, 500 and 800 divs)...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="meal planning, meals" />
<meta name="description" content="recipes, cooking" />
<meta name="robots" content="noindex,nofollow" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/myownmealplanner.css" />
<link rel="stylesheet" type="text/css" href="http://myownmealplanner.com/css/fullcalendar.css" />
<script type="text/javascript" src="http://myownmealplanner.com/js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://myownmealplanner.com/js/ui-1.9.1-jquery-ui.js"></script>
<style>
.plans{
text-decoration:underline;
color:blue;
cursor:pointer;
}
.meals{
display:none;
}
.back{
text-decoration:underline;
color:blue;
cursor:pointer;
float:right
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<a href="/users"><img src="http://myownmealplanner.com/img/layout/indian_wedding.jpg" alt="My Own Meal Planner" id="main_pic" /></a></div>
<div id="top_bar">
<span class="top_tabs">
<a href="/pages/home" class="menu_link">Steps</a></span>
<span class="top_tabs">
<a href="/mealplans/add" class="menu_link">Your Meal Planner</a></span>
<span class="top_tabs">
<a href="/mealplans" class="menu_link">Your Meal Plans</a></span>
<span class="top_tabs">
<a href="/calendars/navigate" class="menu_link">Your Meal Calendar</a></span>
<span class="top_tabs">
<a href="/users" class="menu_link">Register or Log In</a></span>
</div>
<div id="home_page">
<div id="meal_planner">
<script type="text/javascript">
$(document).ready(function() {
var selectedBoxes = new Array();
var total = 0;
var userId = parseInt($('#MealplanUserId').val());
$(".draggable_meal").draggable();
$("#droppable_box").droppable({
drop: function(event, ui) {
var data = $(ui.draggable).attr('id');
selectedBoxes.push($(ui.draggable).attr('id'));
$(ui.draggable).appendTo($(this));
$(ui.draggable).css("position","");
for (var i=1;i<100;i++){
if(data == "draggable" + i){
var myInt = parseInt($('#MealplanCalsPerServing' + i).val());
}
}
if ( typeof myInt === 'undefined' || !myInt) {
myInt = parseInt(0);
}
total += parseFloat(myInt);
$('#response').text(total);
},
// Dropped out, remove it
out: function( event, ui ) {
var data = $(ui.draggable).attr('id');
var sub;
sub = $.inArray(data , selectedBoxes )
if (sub >= 0) {
selectedBoxes.splice(sub, 1);
for (var i=1;i<100;i++){
if(data == "draggable" + i){
var myInt = -($('#MealplanCalsPerServing' + i).val());
}
}
if ( typeof myInt === 'undefined' || !myInt) {
myInt = parseInt(0);
}
total += parseFloat(myInt);
$('#response').text(total);
}
}
});
$('#myId').click(function(event) {
$.post("/mealplans/view", ({ data: selectedBoxes, userId: userId, total: total}), function(data, status) {
window.location = "/mealplans/view"
});
});
$('.plans').click(function() {
$("#tab").hide();
$("#meals"+$(this).attr("id").substr(-3)).show();
});
$('.back').click(function() {
$(this).parent().hide();
$("#tab").show();
});
});
</script>
<h1>Meal Planner</h1>
<br />
<form action="/mealplans/view" id="MealplanViewForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<br />
<div id="draggables_box">
<table id="tab" border="1" width="100%"><tr>
<td><span class="plans" id="pl100">100 cal tiles</span></td>
<td><span class="plans" id="pl200">200 cal tiles</span></td>
<td><span class="plans" id="pl300">300 cal tiles</span></td>
<td><span class="plans" id="pl400">400 cal tiles</span></td>
</tr>
<td><span class="plans" id="pl500">500 cal tiles</span></td>
<td><span class="plans" id="pl600">600 cal tiles</span></td>
<td><span class="plans" id="pl700">700 cal tiles</span></td>
<td><span class="plans" id="pl800">800 cal tiles</span></td>
</tr>
</table>
<div id="meals300" class ="meals">
300 cal meals
<!-- begin of draggable div-->
<div id="draggable5" class="draggable_meal">
<div class="calorie_icon">330 CALS</div>
<span>McDonald's cheeseburger</span>
<input type="hidden" name="data[Mealplan][cals_per_serving5]" multiple="multiple" value="330" id="MealplanCalsPerServing5"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable6" class="draggable_meal">
<div class="calorie_icon">320 CALS</div>
<span>large fries</span>
<input type="hidden" name="data[Mealplan][cals_per_serving6]" multiple="multiple" value="320" id="MealplanCalsPerServing6"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable7" class="draggable_meal">
<div class="calorie_icon">280 CALS</div>
<span>1/2 a bagel with cream cheese and jam</span>
<input type="hidden" name="data[Mealplan][cals_per_serving7]" multiple="multiple" value="280" id="MealplanCalsPerServing7"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<div id="meals500" class ="meals">
500 cal meals
<!-- begin of draggable div-->
<div id="draggable3" class="draggable_meal">
<div class="calorie_icon">540 CALS</div>
<span>Oatmeal with raisins, walnuts, and whole milk</span>
<input type="hidden" name="data[Mealplan][cals_per_serving3]" multiple="multiple" value="540" id="MealplanCalsPerServing3"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable2" class="draggable_meal">
<div class="calorie_icon">510 CALS</div>
<span>1 bag <em>Pop Secret Butter Popcorn</em></span>
<input type="hidden" name="data[Mealplan][cals_per_serving2]" multiple="multiple" value="510" id="MealplanCalsPerServing2"/></div><!-- end of draggable div-->
<!-- begin of draggable div-->
<div id="draggable4" class="draggable_meal">
<div class="calorie_icon">500 CALS</div>
<span>4 dried figs (235 cals) + 15 macadamia nuts (265 cals)</span>
<input type="hidden" name="data[Mealplan][cals_per_serving4]" multiple="multiple" value="500" id="MealplanCalsPerServing4"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<div id="meals800" class ="meals">
800 Cal meals
<!-- begin of draggable div-->
<div id="draggable8" class="draggable_meal">
<div class="calorie_icon">200 CALS</div>
<span>Small Peppermint Mocha</span>
<input type="hidden" name="data[Mealplan][cals_per_serving8]" multiple="multiple" value="200" id="MealplanCalsPerServing8"/></div><!-- end of draggable div-->
<span class="back">back to list</span>
</div>
<h2></h2>
<div style="float:right; margin-right: 6px;"><a href="javascript:location.reload(true)">RESET</a></div>
<br style="clear: both;" />
</div><!--end div for draggables_box -->
<div id="droppable_box">
<p>Drop a meal tile here.</p>
</div>
<br style="clear: both;" />
<div style="margin: 0px auto; width: 622px;">
<p><b style="color: red;"></b></p>
<br style="clear: both;" />
<input type="hidden" name="data[Mealplan][user_id]" value="1" id="MealplanUserId"/>
<input type="button" id="myId" name="myButton" value="Send Data" />
</form><br />
<a href="/users/logout">Logout</a></div>
<br />
</div><!--end div for meal_planner -->
</div><!-- end of div home_page-->
<br style="clear: both;" />
<div id="footer">© 2012 Maureen Moore</div>
</div><!--end of container div-->
</body>
</html>