Duplicate cookie with same name creates undesired behaviour
<p>Hi I am trying to save browser state by storing it into a cookie.For some reason this does not seem to always work how I want it because it creates a duplicate cookie with the same name.Here is what I mean:</p>

<p><img src="http://i.stack.imgur.com/FBWUF.png" alt="enter image description here"></p>

<p>This is the only code I am using to work with cookies:</p>

<pre><code>$(function () {
var content = $("#content");
var state = $.cookie("layoutState");

if (state === "grid") {
    content.removeClass("content-list").addClass("content-grid");
}

if (state === "list") {
    content.removeClass("content-grid").addClass("content-list");
}

$("#list").on("click", function (e) {
    $.cookie("layoutState", "list", { expires: 7, path: "/" });
    content.removeClass("content-grid").addClass("content-list");
    e.preventDefault();
})

$("#grid").on("click", function (e) {
    $.cookie("layoutState", "grid", { expires: 7, path: "/"});
    content.removeClass("content-list").addClass("content-grid");
    e.preventDefault();
})
</code></pre>

<p>})</p>

<p>I am using jQuery cookie plugin.</p>

<p>Does anyone understand what the problem is I have been trying to solve it for hours with no luck?</p>
