I have just solved one part of my puzzle in making Divs appear on a page based on a selection and then making that selection disappear to stop people reselecting.

How do I now store that selection in a session so when they navigate to another page on the site and then come back its still the same. Also can I use the session to display divs on other pages based on the original selection?

I appreciate that with session storage this will then clear when the browser closes, this is fine.

Here is a fiddle of where I am so far https://jsfiddle.net/k33npx/s8k7tfgr/2/

<h4>Your Tariff</h4>
                            
                            
                            <div>
                                Value Selected: <span id="current"></span>
                                <br>
                                <br>
                                <select class="select" id="select">
    <option>Choose Your Option</option>
    <option name="Tarrif 1" value="t1"> 1</option>
    <option name="Tarrif 2" value="t2"> 2</option>
    <option name="Tarrif 3" value="t3"> 3</option>
    <option name="Tarrif 4" value="t4"> 4</option>
</select>

                            <div class="t1"><p>Tariff 1</p></div>
                            <div class="t2"><p>Tariff 2</p></div>
                            <div class="t3"><p>Tariff 3</p></div>
                            <div class="t4"><p>Tariff 4</p></div>
                        </div>

.t1
{display: none}

.t2
{display: none}

.t3
{display: none}

.t4
{display: none}

.select
{display:block}

function showSelectedItem() {

    
    
    
   var item = document.getElementById("select").value;
    
  document.getElementById("current").innerHTML = item;
  const classes = ['t1', 't2', 't3', 't4', 'select'];
  // hide all first;
  classes.forEach((classNode) => {
    document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none';
  });
    
}
document.getElementById("select").addEventListener("change", showSelectedItem);

Thanks