title: Hi can someone help me with refactoring my button functions?
body: <p>Hi can someone help me with refactoring my button functions?</p>
  <p>trying to make 1 function that solves the issue for every button but can't figure how to approach with forEach. also I want alert in my html Element if a field is empty</p>
  <pre><code>const alert = document.querySelector(&quot;.alert&quot;)
  const billAmount = document.querySelector(&quot;.input-box-bill-amt&quot;)
  const button = document.querySelectorAll(&quot;.percent-buttons&quot;)
  const numOfPeople = document.querySelector(&quot;.input-box-num-people&quot;)
  const tip = document.querySelector(&quot;.tip-amount&quot;)
  const total = document.querySelector(&quot;.tip-amount-total&quot;)
  const reset = document.querySelector(&quot;.reset&quot;)
  
  if(billAmount || numOfPeople = &quot; &quot;){
  alert.innerHtml = &quot;Please make sure you fill in every field&quot;
  }else{
  
  button[0].addEventListener('click', () =&gt; {
          tip.innerHTML = `${((5 / 100) * billAmount.value) / numOfPeople.value}`;
          total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((5 /100) * billAmount.value) / numOfPeople.value)}`
      })
  
  button[1].addEventListener('click', () =&gt; {
      
      tip.innerHTML = `${((10 / 100) * billAmount.value) / numOfPeople.value}`;
      total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((10 / 100) * billAmount.value) / numOfPeople.value)}`
  })
  
  button[2].addEventListener('click', () =&gt; {
      tip.innerHTML = `${((15 / 100) * billAmount.value) / numOfPeople.value}`;
      total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((15 / 100) * billAmount.value) / numOfPeople.value)}`
  })
  
  button[3].addEventListener('click', () =&gt; {
  
      tip.innerHTML = `${((25 / 100) * billAmount.value) / numOfPeople.value}`
      total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((25 /100) * billAmount.value) / numOfPeople.value)}`
  })
  
  button[4].addEventListener('click', () =&gt; {
      
      tip.innerHTML = `${((50 / 100) * billAmount.value) / numOfPeople.value}`
      total.innerHTML = `${(billAmount.value / numOfPeople.value) + (((50 /100) * billAmount.value) / numOfPeople.value)}`
  })
  
  reset.addEventListener('click', () =&gt; {
      billAmount.value = '';
      custom.value = '';
      numOfPeople.value = '';
      tip.innerHTML = '00.00';
      total.innerHTML = '00.00';
  })}
  </code></pre>