<div id="inputs">
  <label for=""><input type="checkbox" name="email" id="john">John</label>
  <label for=""><input type="checkbox" name="email" id="sara">Sara</label>
  <label for=""><input type="checkbox" name="email" id="dick">Dick</label>
  <label for=""><input type="checkbox" name="email" id="matt">Matt</label>
</div>

<output></output>

const emailInputs = document.querySelectorAll('[name="email"]')
const output = document.querySelector('output')
const inputsContainer = document.querySelector('#inputs')

function collectEmails(){
  let result = ''
  
  for(const emailInput of emailInputs){
    if(emailInput.checked) result+=`${emailInput.id}@gmail.com;`
  }
  
  return result
}


inputsContainer.addEventListener('change', ()=>{
  output.innerHTML = collectEmails();
})