title: How enable disabled checkbox of a specific div?
body: <p>Here I'm using firebase to display all driver info one by in one div. I have 6 div(i.e 6 object in driver reference) &amp; each div has a checkbox with enabled/disabled option. I want operate checkbox in such way that if I click checkbox of 1st div it will change in only in 1st div,if I click checkbox of 2nd div it will change in only in 2nd div,&amp; so on but the problem is when I clicked any checkbox only 1st checkbox is change... How can I overcome this...thanks in advance
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  function contactHtmlFromObject(Key, Driver){
    console.log(Key,Driver);
      if(Driver.Gender=='Male'){
              html +='&lt;input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')"&gt;&lt;span id="toggle"&gt;Enabled&lt;/span&gt;';
          }
          else{
              html +='&lt;input type="checkbox" id="disablecheckbox" onclick="loaddisable(\''+Key+'\')" checked&gt;&lt;span id="toggle"&gt;Disabled&lt;/span&gt;';
          }
  }
  
  
  function loaddisable(Key) {
      var toggle= document.getElementById("toggle");
      var dcb= document.getElementById("disablecheckbox");
      var Refdis = firebase.database().ref("Driver/"+Key);      
      Refdis.on("value", function(snapshot) {
      if (dcb.checked == true){
        toggle.innerHTML="Disabled";
          }
      else {
        toggle.innerHTML="Enabled";
    }
  });
  }</code></pre>
  </div>
  </div>
  </p>