title: Duplicate cookie with same name creates undesired behaviour
body: <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="https://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>