Restructuring Settings Structure

2 files changed, 28 insertions, 28 deletions

diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index d63618a3..820294b2 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -162,20 +162,20 @@
 
     <div id="libreddit">
 
-      <div id="libreddit-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="libreddit-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-libreddit-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="libreddit-normal-custom-instance" placeholder="https://libreddit.com" type="url" />
-            <button type="submit" class="add" id="libreddit-normal-add-instance">
+            <input class="custom-instance" placeholder="https://libreddit.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,23 +184,23 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="libreddit-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
-      <div id="libreddit-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="libreddit-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-libreddit-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="libreddit-tor-custom-instance" placeholder="https://libreddit.com" type="url" />
-            <button type="submit" class="add" id="libreddit-tor-add-instance">
+            <input class="custom-instance" placeholder="https://libreddit.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" />
@@ -209,27 +209,27 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="libreddit-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
 
     </div>
 
     <div id="teddit">
 
-      <div id="teddit-normal">
+      <div class="normal">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="teddit-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-teddit-normal-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="teddit-normal-custom-instance" placeholder="https://teddit.com" type="url" />
-            <button type="submit" class="add" id="teddit-normal-add-instance">
+            <input class="custom-instance" placeholder="https://teddit.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" />
@@ -238,22 +238,22 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="teddit-normal-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
-      <div id="teddit-tor">
+      <div class="tor">
         <div class="some-block option-block">
           <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-        <div class="checklist" id="teddit-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-teddit-tor-instance-form">
+        <form class="custom-instance-form">
           <div class="some-block option-block">
-            <input id="teddit-tor-custom-instance" placeholder="https://teddit.com" type="url" />
-            <button type="submit" class="add" id="teddit-tor-add-instance">
+            <input class="custom-instance" placeholder="https://teddit.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" />
@@ -262,7 +262,7 @@
             </button>
           </div>
         </form>
-        <div class="checklist" id="teddit-tor-custom-checklist"></div>
+        <div class="checklist custom-checklist"></div>
       </div>
     </div>
   </section>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 6d747eb1..2645ed41 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -45,11 +45,11 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalLibredditDiv = document.getElementById("libreddit-normal");
-    let torLibredditDiv = document.getElementById("libreddit-tor");
+    let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
+    let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
 
-    let normalTedditDiv = document.getElementById("teddit-normal");
-    let torTedditDiv = document.getElementById("teddit-tor");
+    let normalTedditDiv = tedditDivElement.getElementsByClassName("normal")[0];
+    let torTedditDiv = tedditDivElement.getElementsByClassName("tor")[0];
     if (protocol == 'normal') {
         normalLibredditDiv.style.display = 'block';
         normalTedditDiv.style.display = 'block';