2 cookies are created with different values, how to fix?

Question

JavaScript

The task is to configure the switching of the type (sect/list) of product cards in such a way that when the type is selected on other pages, the selected type is saved. I decided to do it with cookies.

When you click on the view icon, a cookie is set. And set the conditions that if cookies = list, then display using the list.

But in the end, the cards are always displayed as a list. As I found out, for some reason 2 cookies are created with different values.

How can I fix this? I am new to JS and coding in general.

if (document.cookie ='productbox=grid') {
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
    }
    
    if (document.cookie ='productbox=list') {
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    }
    
    jQuery('.product-view-button .grid').click(function(){
        document.cookie ='productbox=grid';
        jQuery('.product-js').removeClass('product-box-flex');  
        jQuery('.product-js').addClass('product-box');
        jQuery('.product-view-button .list').removeClass('active');  
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-12 col-lg-12').addClass('col-md-6 col-lg-4');
      
        return false; 
    });
    
    jQuery('.product-view-button .list').click(function(){
        document.cookie ='productbox=list';
        jQuery('.product-js').removeClass('product-box');  
        jQuery('.product-js').addClass('product-box-flex');
        jQuery('.product-view-button .grid').removeClass('active');     
        jQuery(this).addClass('active');
        jQuery('.product-block').removeClass('col-md-6 col-lg-4').addClass('col-md-12 col-lg-12');
    
        return false;
    });

Answer 1

if you do not know how to use cookies (to make the value available on all pages of the site, you need to specify `path=/`), then store it in localStorage/webStorage, it is easier to work with them