Restructuring Settings Structure

2 files changed, 44 insertions, 44 deletions

diff --git a/src/pages/options/search/search.html b/src/pages/options/search/search.html
index a90ad8ed..a5f26ab3 100644
--- a/src/pages/options/search/search.html
+++ b/src/pages/options/search/search.html
@@ -162,20 +162,20 @@
 
     <div id="searx">
       <hr>
-      <div id="searx-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searx-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searx-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searx-normal-custom-instance" placeholder="https://searx.com" type="url" />
-            <button type="submit" class="add" id="searx-normal-add-instance">
+            <input class="custom-instance" placeholder="https://searx.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -184,22 +184,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searx-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="searx-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searx-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searx-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searx-tor-custom-instance" placeholder="https://searx.com" type="url" />
-            <button type="submit" class="add" id="searx-tor-add-instance">
+            <input class="custom-instance" placeholder="https://searx.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -208,26 +208,26 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searx-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
 
     <div id="searxng">
       <hr>
-      <div id="searxng-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searxng-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searxng-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searxng-normal-custom-instance" placeholder="https://searxng.com" type="url" />
-            <button type="submit" class="add" id="searxng-normal-add-instance">
+            <input class="custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -236,22 +236,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searxng-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="searxng-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="searxng-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-searxng-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="searxng-tor-custom-instance" placeholder="https://searxng.com" type="url" />
-            <button type="submit" class="add" id="searxng-tor-add-instance">
+            <input class="custom-instance" placeholder="https://searxng.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -260,26 +260,26 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="searxng-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
 
     <div id="whoogle">
       <hr>
-      <div id="whoogle-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="whoogle-normal-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-whoogle-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="whoogle-normal-custom-instance" placeholder="https://whoogle.com" type="url" />
-            <button type="submit" class="add" id="whoogle-normal-add-instance">
+            <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -288,22 +288,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="whoogle-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="whoogle-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="whoogle-tor-checklist">
+        <div class="checklist checklist">
         </div>
         <hr>
         <div class="some-block option-block">
           <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-        <form id="custom-whoogle-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="whoogle-tor-custom-instance" placeholder="https://whoogle.com" type="url" />
-            <button type="submit" class="add" id="whoogle-tor-add-instance">
+            <input class="custom-instance" placeholder="https://whoogle.com" type="url" />
+            <button type="submit" class="add add-instance">
               <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
                 fill="currentColor">
                 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -312,10 +312,9 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="whoogle-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
-    </div>
 
   </section>
 
@@ -325,4 +324,4 @@
   <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/options/search/search.js b/src/pages/options/search/search.js
index cc4a44ea..d96665e9 100644
--- a/src/pages/options/search/search.js
+++ b/src/pages/options/search/search.js
@@ -61,14 +61,15 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-  let normalsearxDiv = document.getElementById("searx-normal");
-  let torsearxDiv = document.getElementById("searx-tor");
+  let normalsearxDiv = searxDivElement.getElementsByClassName("normal")[0];
+  let torsearxDiv = searxDivElement.getElementsByClassName("tor")[0];
 
-  let normalsearxngDiv = document.getElementById("searxng-normal");
-  let torsearxngDiv = document.getElementById("searxng-tor");
+  let normalsearxngDiv = searxngDivElement.getElementsByClassName("normal")[0];
+  let torsearxngDiv = searxngDivElement.getElementsByClassName("tor")[0];
+
+  let normalwhoogleDiv = whoogleDivElement.getElementsByClassName("normal")[0];
+  let torwhoogleDiv = whoogleDivElement.getElementsByClassName("tor")[0];
 
-  let normalwhoogleDiv = document.getElementById("whoogle-normal");
-  let torwhoogleDiv = document.getElementById("whoogle-tor");
   if (protocol == 'normal') {
     normalsearxDiv.style.display = 'block';
     normalsearxngDiv.style.display = 'block';