Так пойдёт?
<!doctype html>
<html>
<head>
<meta charset="utf8">
<title>Завтрак - Обед - Ужин</title>
<style>
table {
border: 1px solid black;
}
td {
border: 1px dotted gray;
height: 30px;
width: 30px;
}
</style>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
var main = function () {
"use strict";
var coasts = [[100, 200, 300],
[150, 250, 350],
[180, 280, 380]];
$("table td").toArray().forEach(function (element) {
var $el = $(element);
var $total = $("#total");
$el.on("click", function() {
var i, j;
i = $el.attr("id")[0];
j = $el.attr("id")[1];
if ( $el.text() ) {
$el.text("");
if ( $total.text ) $total.text( +$total.text() - +coasts[i][j] );
} else {
$el.text(coasts[i][j]);
$total.text( +$total.text() + +coasts[i][j] );
}
});
});
};
$(document).ready(main);
</script>
</head>
<body>
<p>Общая стоимость: <span id='total'></span></p>
<table>
<tr>
<td></td>
<td>S</td>
<td>M</td>
<td>L</td>
</tr>
<tr>
<td>Завтрак</td>
<td id="00"></td>
<td id="01"></td>
<td id="02"></td>
</tr>
<tr>
<td>Обед</td>
<td id="10"></td>
<td id="11"></td>
<td id="12"></td>
</tr>
<tr>
<td>Ужин</td>
<td id="20"></td>
<td id="21"></td>
<td id="22"></td>
</tr>
</table>
</body>
</html>