title: Selection of Bootstrap switch group
body: <p>There are many switches in my table, so I want to switch(on/off) every switch separately. But in here when I switch some one it affect for the all i think that is dues to it's <code>class</code>. please tell me how to work with each switch without effecting to others,</p>
  
  <p>this is the switch group 
  <a href="https://i.stack.imgur.com/Ui9Oi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ui9Oi.png" alt="enter image description here"></a></p>
  
  <pre><code>    function load_saved_exam_data() {
          var tableData = '';
          jQuery.post('&lt;?php echo site_url("administrator/active_exam_c/load_activate_exams") ?&gt;', function (e) {
              if (e === undefined || e.length === 0 || e === null) {
                  tableData += '&lt;tr&gt;&lt;th colspan="8" class="alert alert-warning text-center"&gt; -- No Data Found -- &lt;/th&gt;&lt;/tr&gt;';
                  jQuery('.activate_exam_tbl tbody').html('').append(tableData);
              } else {
                  jQuery.each(e, function (index, qData) {
  //                    alert(qData.act_status);
                      var checked;
                      if (qData.act_status == 1) {
                          checked = 'checked';
                      } else {
                          checked = '';
                      }
  
                      index++;
                      tableData += '&lt;tr&gt;';
                      tableData += '&lt;td&gt;' + index + '&lt;/td&gt;';
                      tableData += '&lt;td&gt;' + qData.exam_name + '&lt;/td&gt;';
                      tableData += '&lt;td&gt;' + qData.start_date + '&lt;/td&gt;';
                      tableData += '&lt;td&gt;' + qData.end_date + '&lt;/td&gt;';
                      tableData += '&lt;td&gt;' + qData.ex_session_id + '&lt;/td&gt;';
                      tableData += '&lt;td&gt;&lt;div class="btn-group"&gt;'
                              + '&lt;div class="onoffswitch"&gt;&lt;input type="checkbox" onclick="handleClick(this);" name="onoffswitch" class="onoffswitch-checkbox" value="' + qData.exm_id + '" id="myonoffswitch" ' + checked + ' &gt;&lt;label class="onoffswitch-label" for="myonoffswitch"&gt;&lt;span class="onoffswitch-inner"&gt;&lt;/span&gt;&lt;span class="onoffswitch-switch"&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;';
                      tableData += '&lt;td&gt;&lt;div class="btn-group"&gt;&lt;button class="btn btn-danger delete_exam_act"  value="' + qData.exm_id + '"&gt;&lt;i class="fa fa-trash-o fa-lg"&gt;&lt;/i&gt;&amp;nbsp;Remove&lt;/button&gt;&lt;/div&gt;&lt;/td&gt;';
                      tableData += '&lt;/tr&gt;';
                  });
  
                  jQuery('.activate_exam_tbl tbody').html('').append(tableData);
              }
          }, "json");
      }
  
  
  
      function handleClick(cb) {
          var activation_val = jQuery(cb).val();
          var activation_checked;
          if (cb.checked) {
              activation_checked = '1';
          } else {
              activation_checked = '0';
          }
          var data = {
              activation_val: activation_val,
              activation_checked: activation_checked
  
          };
          jQuery.post('&lt;?php echo site_url("administrator/active_exam_c/update_exam_activation") ?&gt;', data, function (d) {
  //            console.log(d);
              if (d.status == 1) {
                  swal("success!", "Successfully Updated!", "success");
  
              } else {
                  swal("Only one exam can be activated..", "Please deactivate active exam and try again!", "warning");
  
              }
          }, 'json');
      }
  </code></pre>
  
  <p>This switch is working with <code>css</code> </p>
  
  <pre><code>.onoffswitch {
      position: relative; width: 90px;
      -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
  }
  
  .onoffswitch-checkbox {
      display: none;
  }
  
  .onoffswitch-label {
      display: block; overflow: hidden; cursor: pointer;
      border: 2px solid #999999; border-radius: 20px;
  }
  
  .onoffswitch-inner {
      display: block; width: 200%; margin-left: -100%;
      -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
      -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
  }
  
  .onoffswitch-inner:before, .onoffswitch-inner:after {
      display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
      font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
  }
  
  .onoffswitch-inner:before {
      content: "ACTIVE";
      padding-left: 10px;
      background-color: #2FCCFF; color: #FFFFFF;
  }
  
  .onoffswitch-inner:after {
      content: "NOT ACTIVE";
      padding-right: 10px;
      background-color: #EEEEEE; color: #999999;
      text-align: right;
  }
  
  .onoffswitch-switch {
      display: block; width: 18px; margin: 6px;
      background: #FFFFFF;
      border: 2px solid #999999; border-radius: 20px;
      position: absolute; top: 0; bottom: 0; right: 56px;
      -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
      -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
  }
  
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
      margin-left: 0;
  }
  
  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
      right: 0px; 
  }
  </code></pre>