Creating a dynamic menu-planning page and shopping list

I have a page on my site that allows users to create a shopping list from seven dinner recipes and one dessert, Users can deselect ingredients that are already onhand so that these items are not included on the shopping list.  You can see the page as it currently functions here: http://www.whatsfordinner.net/meals.html My goal is to expand the user interactiveness by allowing visitors to deselect meals they don’t wish to serve and replace them with other meals from the site.  Using the example Dynamically Add/Remove rows in HTML table using JavaScript: https://www.viralpatel.net/dynamically-add-remove-rows-in-html-table-using-javascript/ I have been successful (with Viral’s help) in creating the code that will allow users to remove the meals they don’t wish to include.  I then set and retrieved my first cookie (the setting part wasn’t so hard, but I am still a bit fuzzy on parts of the read cookie function) so that the users choices are saved when the page is exited.  You can see it work here: http://www.whatsfordinner.net/Testing-Cookie-Set.html Now I’m ready for the next step, moving information from another page and placing it into the first page.  I am using  getElementById to capture a div section with a cookie and (hopefully) move that information via the cookie and document.write the variable onto the first page.  I’m beginning to wonder if that can be done.

var newMeal = document.getElementsByName('groceries');
var expires = new Date();
expires.setTime (expires.getTime() + 24 * 60 * 60 * 1000);
var expiryDate = expires.toGMTString();

function newCookie(add,newMeal) {
 document.cookie = add + "=" + newMeal + "; expires=" + expiryDate;
}

function toShoppingList() {
 window.location = "http://www.whatsfordinner.net/Testing-Insert-div.html";
}

<div id="groceries">
 Shopping list for a new meal
</div>
<form onClick="toShoppingList();" "newCookie();">
 <input type="button" value="Add this meal to my menu and shopping list">
</form>
Code language: JavaScript (javascript)

If it is possible to carry the entire div with a cookie, I now need to write the cookie function to read the data.  Since I had success with the previous getCookie, I altered that function for the new variable

Code language: JavaScript (javascript)

function getCookie(add) { var cookieFound = false; var start = 0; var end = 0; var cookieString = document.cookie; var i = 0; //Scan the cookie for add while (i <= cookieString.length) { start = i; end = start + add.length; if (cookieString.substring(start,end) == add) { cookieFound = true; break; } i++; } //Is add found? if (cookieFound) { start = end + 1; end = document.cookie.indexOf(";",start); if (end < start); end = document.cookie.length; return document.cookie.substring(start,end); } return ""; } [/code] Then I put this javascript into the body where I was hoping the div information would appear. [code="javascript"] document.write(addIt) [/code] Of course, it couldn't be that simple, could it?  I would love to hear from someone who has been successful in moving information across pages.  Is there a fix to the codes I have written, or is there a better way to do this?  Thanks so much. Side note:  I realize that there is a lot more to be done with a meal planning site that involves creating a database.  I do plan to establish that and use it to create much more interactivity.  Meanwhile, after 5 years of building traffic and attracting spatters of media attention, I feel the urgent need to make a change that can immediately increase user interactivity.  This javascript meal switch is something that I can do with all the recipes as they currently appear in html.  It is also a good way for me to gain skills and build some confidence.  :) Jean Fisher What's For Dinner? Make dinner time, family time! http://www.whatsfordinner.net