diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html
index 1f768c9f3..d7fdf775d 100644
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -1991,26 +1991,26 @@
                 <p class="mb-1">Radio Button Group with <code>.btn-secondary</code></p>
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                   <label class="btn btn-secondary active">
-                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+                    <input type="radio" name="options" id="option_a1" autocomplete="off" checked> Active
                   </label>
                   <label class="btn btn-secondary">
-                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+                    <input type="radio" name="options" id="option_a2" autocomplete="off"> Radio
                   </label>
                   <label class="btn btn-secondary">
-                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+                    <input type="radio" name="options" id="option_a3" autocomplete="off"> Radio
                   </label>
                 </div>
 
                 <p class="mt-3 mb-1">Radio Button Group with <code>.bg-olive</code></p>
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                   <label class="btn bg-olive active">
-                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
+                    <input type="radio" name="options" id="option_b1" autocomplete="off" checked> Active
                   </label>
                   <label class="btn bg-olive">
-                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
+                    <input type="radio" name="options" id="option_b2" autocomplete="off"> Radio
                   </label>
                   <label class="btn bg-olive">
-                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
+                    <input type="radio" name="options" id="option_b3" autocomplete="off"> Radio
                   </label>
                 </div>
               </div>
diff --git a/pages/examples/e-commerce.html b/pages/examples/e-commerce.html
index 69d067826..59680052c 100644
--- a/pages/examples/e-commerce.html
+++ b/pages/examples/e-commerce.html
@@ -748,31 +748,31 @@
               <h4>Available Colors</h4>
               <div class="btn-group btn-group-toggle" data-toggle="buttons">
                 <label class="btn btn-default text-center active">
-                  <input type="radio" name="color_option" id="color_option1" autocomplete="off" checked>
+                  <input type="radio" name="color_option" id="color_option_a1" autocomplete="off" checked>
                   Green
                   <br>
                   <i class="fas fa-circle fa-2x text-green"></i>
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option2" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_a2" autocomplete="off">
                   Blue
                   <br>
                   <i class="fas fa-circle fa-2x text-blue"></i>
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option3" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_a3" autocomplete="off">
                   Purple
                   <br>
                   <i class="fas fa-circle fa-2x text-purple"></i>
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option4" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_a4" autocomplete="off">
                   Red
                   <br>
                   <i class="fas fa-circle fa-2x text-red"></i>
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option5" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_a5" autocomplete="off">
                   Orange
                   <br>
                   <i class="fas fa-circle fa-2x text-orange"></i>
@@ -782,25 +782,25 @@
               <h4 class="mt-3">Size <small>Please select one</small></h4>
               <div class="btn-group btn-group-toggle" data-toggle="buttons">
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option1" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_b1" autocomplete="off">
                   <span class="text-xl">S</span>
                   <br>
                   Small
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option1" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_b2" autocomplete="off">
                   <span class="text-xl">M</span>
                   <br>
                   Medium
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option1" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_b3" autocomplete="off">
                   <span class="text-xl">L</span>
                   <br>
                   Large
                 </label>
                 <label class="btn btn-default text-center">
-                  <input type="radio" name="color_option" id="color_option1" autocomplete="off">
+                  <input type="radio" name="color_option" id="color_option_b4" autocomplete="off">
                   <span class="text-xl">XL</span>
                   <br>
                   Xtra-Large
@@ -818,12 +818,12 @@
 
               <div class="mt-4">
                 <div class="btn btn-primary btn-lg btn-flat">
-                  <i class="fas fa-cart-plus fa-lg mr-2"></i> 
+                  <i class="fas fa-cart-plus fa-lg mr-2"></i>
                   Add to Cart
                 </div>
 
                 <div class="btn btn-default btn-lg btn-flat">
-                  <i class="fas fa-heart fa-lg mr-2"></i> 
+                  <i class="fas fa-heart fa-lg mr-2"></i>
                   Add to Wishlist
                 </div>
               </div>
diff --git a/pages/forms/general.html b/pages/forms/general.html
index a9cadca41..431463fb4 100644
--- a/pages/forms/general.html
+++ b/pages/forms/general.html
@@ -1052,7 +1052,7 @@
                           <label class="form-check-label">Checkbox disabled</label>
                         </div>
                       </div>
-                    </div> 
+                    </div>
                     <div class="col-sm-6">
                       <!-- radio -->
                       <div class="form-group">
@@ -1157,7 +1157,7 @@
                           <label for="customCheckbox3" class="custom-control-label">Custom Checkbox disabled</label>
                         </div>
                       </div>
-                    </div> 
+                    </div>
                     <div class="col-sm-6">
                       <!-- radio -->
                       <div class="form-group">
@@ -1256,12 +1256,12 @@
                     <input type="range" class="custom-range" id="customRange1">
                   </div>
                   <div class="form-group">
-                    <label for="customRange1">Custom range (custom-range-danger)</label>
-                    <input type="range" class="custom-range custom-range-danger" id="customRange1">
+                    <label for="customRange2">Custom range (custom-range-danger)</label>
+                    <input type="range" class="custom-range custom-range-danger" id="customRange2">
                   </div>
                   <div class="form-group">
-                    <label for="customRange1">Custom range (custom-range-teal)</label>
-                    <input type="range" class="custom-range custom-range-teal" id="customRange1">
+                    <label for="customRange3">Custom range (custom-range-teal)</label>
+                    <input type="range" class="custom-range custom-range-teal" id="customRange3">
                   </div>
                   <div class="form-group">
                     <!-- <label for="customFile">Custom File</label> -->