feat: name attribute and variable renamed to key

Author: frankpagan

demo/index.html

@@ -80,15 +80,15 @@ <h6 style="color: blue">4 example RADIOBUTTON</h6>
                 <label class="option">
                     <input
                         type="radio"
-                        name="pack"
+                        key="pack"
                         value=""
                         show="#ctr_personal1" />
                     <span class="radio"></span> Personal
                 </label>
                 <label class="option">
                     <input
                         type="radio"
-                        name="pack"
+                        key="pack"
                         value=""
                         show="#ctr_business1"
                         checked />
@@ -97,7 +97,7 @@ <h6 style="color: blue">4 example RADIOBUTTON</h6>
                 <label class="option">
                     <input
                         type="radio"
-                        name="pack"
+                        key="pack"
                         value=""
                         show="#ctr_corporate1" />
                     <span class="radio"></span> Corporate
@@ -116,15 +116,15 @@ <h6 style="color: blue">5 example RADIOBUTTON (show MULTIPLE)</h6>
                 <label class="option">
                     <input
                         type="radio"
-                        name="package"
+                        key="package"
                         value=""
                         show="#ctr_personal" />
                     <span class="radio"></span> Personal
                 </label>
                 <label class="option">
                     <input
                         type="radio"
-                        name="package"
+                        key="package"
                         value=""
                         show="#ctr_business,#other_business"
                         checked />
@@ -133,7 +133,7 @@ <h6 style="color: blue">5 example RADIOBUTTON (show MULTIPLE)</h6>
                 <label class="option">
                     <input
                         type="radio"
-                        name="package"
+                        key="package"
                         value=""
                         show=".ctr_corporate" />
                     <span class="radio"></span> Corporate

docs/index.html

@@ -11,10 +11,10 @@
             sizes="32x32"
             href="https://cocreate.app/images/favicon.ico" />
         <meta
-            name="description"
+            key="description"
             content="Simple JS component show &amp; hide elements conditionally with inputs,checkbox,radio,btn etc.Great for creating tabs, accordions, dynamic forms, etc" />
         <meta
-            name="keywords"
+            key="keywords"
             content="helper classes, utility classes, css framework, css library, inline style classes" />
         <meta name="robots" content="index,follow" />
         <meta
@@ -31,7 +31,7 @@
             href="/docs/index.css"
             array="files"
             object="60888216117c640e7596303f"
-            name="src"
+            key="src"
             type="text/css"
             save="true" />
         <link rel="manifest" href="/manifest.webmanifest" />
@@ -46,7 +46,7 @@
             scroll-down="10"
             array="files"
             object="60395ef42b3ac232657040fd"
-            name="src"></nav>
+            key="src"></nav>
         <sidenav
             id="menuL"
             class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
@@ -57,7 +57,7 @@
             <menu
                 array="files"
                 object="603717b07de7fb350ae9fec8"
-                name="src"></menu>
+                key="src"></menu>
             <div resize="right"></div>
         </sidenav>
         <main
@@ -293,7 +293,7 @@ <h2 class="padding:5px_0px">Demo</h2>
                                     lang="html"
                                     array="demos"
                                     object=""
-                                    name="demo"
+                                    key="demo"
                                     save="false"
                                     id="demo"
                                     class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>

src/index.js

@@ -68,8 +68,8 @@ function clickShowHideEle(e) {
     let tagName = element.tagName.toLowerCase();
 
     if (tagName == 'input' && element.getAttribute("type").toLowerCase() == 'radio') {
-        let name = element.getAttribute("name");
-        let radios = document.querySelectorAll(tagName + '[name="' + name + '"]');
+        let key = element.getAttribute("key");
+        let radios = document.querySelectorAll(tagName + '[key="' + key + '"]');
         for (let radio of radios) {
 
             show = radio.getAttribute('show');