title: Need to double click element to load query
body: <p>I have this issue where I need to double click an image to load a query, I am doing an inventory website for fallout and I have the crafting benches as images and need to load items when certain benches is clicked but it gives me the value of the bench when I click once but then doesn't load the items for that crafting bench , I then need to click again before it loads. The items loads from a database where I call them through sql query when the crafting bench image is pressed.</p>
  <pre><code>    &lt;form method=&quot;post&quot; asp-page-handler=&quot;location&quot; &gt;
            &lt;input id=&quot;station&quot;  name=&quot;station&quot; type=&quot;text&quot; value=&quot;&quot; &gt;
            &lt;input id=&quot;location&quot; name=&quot;location&quot; type=&quot;text&quot; value=&quot;&quot; &gt;
      &lt;div class=&quot;craftingbenchcon&quot;&gt;
  
          &lt;div class=&quot;Workbench Armour&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/ArmourWorkbench.png&quot; 
                alt=&quot;Workbenchimg&quot;/&gt; 
              &lt;h3 class=&quot;workbenchname&quot;&gt;Armour Workbench&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;Workbench Weapons&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/WeaponsWorkbench.png&quot; 
               alt=&quot;Workbenchimg&quot;/&gt; 
              &lt;h3 class=&quot;workbenchname&quot;&gt;Weapons Workbench&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;Workbench Tinker&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/TinkerWorkbench.png&quot; 
               alt=&quot;Workbenchimg&quot;/&gt;
              &lt;h3 class=&quot;workbenchname&quot;&gt;Tinker Workbench&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;Workbench Chemistry&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/ChemestryStation.png&quot; 
               alt=&quot;Workbenchimg&quot;/&gt;
              &lt;h3 class=&quot;workbenchname&quot;&gt;Chemestry Station&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;Workbench Cooking&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/CookingStation.png&quot; alt=&quot;Workbenchimg&quot;/&gt; 
              &lt;h3 class=&quot;workbenchname&quot;&gt;Cooking Station&lt;/h3&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;Workbench Brewing&quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
              &lt;img class=&quot;Workbenchimg&quot; src=&quot;~/images/BrewingStation.png&quot; alt=&quot;Workbenchimg&quot;/&gt; 
              &lt;h3 class=&quot;workbenchname&quot;&gt;Brewing Station&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;locationTabCrafting &quot;&gt;
  
          &lt;div  class=&quot;backpacktabCrafting locationtabbtn&quot;  
                 onclick=&quot;document.forms[0].submit()&quot;&gt;
           &lt;label&gt;Backpack&lt;/label&gt;
              &lt;img class=&quot;locationimg&quot; src=&quot;~/images/backpack.webp&quot; alt=&quot;location&quot;/&gt;      
          &lt;/div&gt;
  
  
          &lt;div   class=&quot;basetabCrafting &quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
           &lt;label&gt;Base&lt;/label&gt;
              &lt;img class=&quot;locationimg&quot; src=&quot;~/images/base.webp&quot; alt=&quot;location&quot;/&gt;  
              
          &lt;/div&gt;
  
          &lt;div  class=&quot;SurvivaltenttabCrafting &quot; onclick=&quot;document.forms[0].submit()&quot;&gt;
           &lt;label&gt;Survival Tent&lt;/label&gt;
              &lt;img class=&quot;locationimg&quot; src=&quot;~/images/survivaltent.webp&quot; alt=&quot;location&quot;/&gt;  
          
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt; 
  
  
  </code></pre>
  <pre><code>
  
  
      $(document).ready(function() {
  
  
          $(&quot;.Weapons&quot;).click(function () {
          localStorage.setItem(&quot;station&quot;, &quot;WeaponsWorkbench&quot;);  
          });
  
          $(&quot;.Tinker&quot;).click(function () {
          localStorage.setItem(&quot;station&quot;, &quot;TinkerWorkbench&quot;);  
          });
  
          $(&quot;.Chemistry&quot;).click(function () {
          localStorage.setItem(&quot;station&quot;, &quot;ChemistryStation&quot;);  
          });
  
          $(&quot;.Cooking&quot;).click(function () {
          localStorage.setItem(&quot;station&quot;, &quot;CookingStation&quot;);  
          });
  
           $(&quot;.Brewing&quot;).click(function () {
           localStorage.setItem(&quot;station&quot;, &quot;BrewingStation&quot;);  
           });
  
          $(&quot;.Armour&quot;).click(function () {
          localStorage.setItem(&quot;station&quot;, &quot;ArmourWorkbench&quot;);  
          });
  
         let getstation = localStorage.getItem(&quot;station&quot;);
         console.log(getstation)
  
  
  
  
        if(getstation == &quot;ArmourWorkbench&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
  
        document.getElementById('station').setAttribute('value', 
        localStorage.getItem('station'));
  
        }else if(getstation == &quot;WeaponsWorkbench&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
  
          document.getElementById('station').setAttribute('value', 
          localStorage.getItem('station'));
  
        }else if(getstation == &quot;TinkerWorkbench&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
          document.getElementById('station').setAttribute('value', 
          localStorage.getItem('station'));
  
        }else if(getstation == &quot;ChemistryStation&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
          document.getElementById('station').setAttribute('value', 
          localStorage.getItem('station'));
  
        }else if(getstation == &quot;CookingStation&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
          document.getElementById('station').setAttribute('value', 
          localStorage.getItem('station'));
  
        }else if(getstation == &quot;BrewingStation&quot;){
        $(&quot;.Weapons&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Tinker&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Chemistry&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Cooking&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
        $(&quot;.Brewing&quot;).css(&quot;opacity&quot;, &quot;100%&quot;);
        $(&quot;.Armour&quot;).css(&quot;opacity&quot;, &quot;30%&quot;);
          document.getElementById('station').setAttribute('value', 
          localStorage.getItem('station'));
  
      }
  
  
      //onclick for location buttons/ for styling
      $(&quot;.backpacktabCrafting&quot;).click(function () {
      localStorage.setItem(&quot;active&quot;, 1);  
  
      });
      //onclick for location buttons/ for styling
      $(&quot;.basetabCrafting&quot;).click(function () {
      localStorage.setItem(&quot;active&quot;, 2);  
      });
      //onclick for location buttons/ for styling
      $(&quot;.SurvivaltenttabCrafting&quot;).click(function () {
      localStorage.setItem(&quot;active&quot;, 3);  
      });
  
      let activeclass = localStorage.getItem(&quot;active&quot;);
      console.log(activeclass)
  
  
  
      if(activeclass == 1){
           $(&quot;.backpacktabCrafting&quot;).addClass(&quot;locationtabbtn&quot;);
               $(&quot;.basetabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
      $(&quot;.SurvivaltenttabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
          document.getElementById('location').setAttribute('value', 1);
      }else if(activeclass == 2){
           $(&quot;.basetabCrafting&quot;).addClass(&quot;locationtabbtn&quot;);
               $(&quot;.backpacktabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
      $(&quot;.SurvivaltenttabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
              document.getElementById('location').setAttribute('value', 2);
      }else if(activeclass == 3){
           $(&quot;.SurvivaltenttabCrafting&quot;).addClass(&quot;locationtabbtn&quot;);
               $(&quot;.basetabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
      $(&quot;.backpacktabCrafting&quot;).removeClass(&quot;locationtabbtn&quot;);
              document.getElementById('location').setAttribute('value',3);
      }
  
      });
  
  </code></pre>