Pure Javascript Dynamic Toggle Function

Instantiation by classes

by jeremykenedy

HTML

<div class="group">
  <input name="name" id="name" class="editable" placeholder="name"> 
  <label for="name" id="name_label" class="trigger"> Edit</label>
</div>

<div class="group">
  <input name="rank" id="rank" class="editable" placeholder="rank"> 
  <label for="rank" id="rank_label" class="trigger"> Edit</label>
</div>

CSS

.group >input {
  border: 1px solid red;
}
.group >input:not(.editing) {
  pointer-events: none;
  tab-index: -1;  
  border: none;
  border-bottom: 1px solid #444444;
}
.group >label {
   cursor: pointer;
   font-family: arial;
   border: 1px solid #000000;
   border-radius: 3px;
   text-transform: uppercase;
}
.group >label.editing-active {
  background: blue;
  color: white;
  border-color: blue;
}

JavaScript

function toggleEdit(children, editables){

  var children = document.querySelectorAll(children);
  var editables = document.querySelectorAll(editables);
  
  for(var i=0; i< children.length; i++){
    children[i].addEventListener("click", function(){
      for(var g=0; g< editables.length; g++){
        editables[g].classList.add("editing");
        children[g].classList.add("editing-active");
        editables[g].addEventListener("blur", function(){
          this.classList.remove("editing");       
          var x = document.getElementsByClassName("editing-active");
          for (var i = 0; i < x.length; i++) {
              x[i].classList.remove("editing-active");
          }          
        }, false)
      }         
    }, false)
  }
}

//toggleEdit(".trigger", ".editable");

toggleEdit(".trigger", ".editable");
toggleEdit(".trigger", ".editable");