Email Signature Script

This is where I try to get banner population working

HTML

<div class="signature-columns">
  <form class="sigform" id="sigform" name="sigform">
    <input class="sigform-input" id="sigform-input__name" type="text" placeholder="Name:">
    <input class="sigform-input" id="sigform-input__title" type="text" placeholder="Title:">
    <input class="sigform-input" id="sigform-input__phone__dir" type="tel" placeholder="Direct phone number:">
    <input class="sigform-input" id="sigform-input__phone__off" type="tel" placeholder="Office phone number:">
    <input class="sigform-input" id="sigform-input__ext__off" type="number" placeholder="Office Extension:">
    <input class="sigform-input" id="sigform-input__website" type="url" placeholder="Team Website:">
    <label class="sigform-label" id="sigform-label__banner-inst" for="sigform-field__banner-fs">Add banners to your signature. You may choose up to 2.
      <fieldset class="sigform-fieldset" id="sigform-field__banner-fs" labeledby="sigform-label__banner-inst">
        <label class="sigform-label" id="sigform-label__banner-one"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
        <label class="sigform-label" id="sigform-label__banner-two"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
        <label class="sigform-label" id="sigform-label__banner-three"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
        <label class="sigform-label" id="sigform-label__banner-four"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
        <label class="sigform-label" id="sigform-label__banner-five"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
        <label class="sigform-label" id="sigform-label__banner-six"><input class="sigform-check" type="checkbox" name="sigform__banner-checks"></label>
      </fieldset>
    </label>
    <label class="sigform-label" id="sigform-label__add-team">How many additional team...

CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

body {

  font-size: 16;
  font-family: "Source Sans Pro", Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #095285;

}

.signature-columns {
  display: flex;
  flex-direction: row;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%);

}

form {
  padding: 5vw;
  width: 40vw;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
}

.sigform-input {
  display: block;
  padding: 10px 10px 5px 0;
  width: 100%;
  box-sizing: border-box;
  margin: 10px;
  background-color: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #095285;
  font-size: 24px;
  font-weight: 600;
  font-family: "Source Sans Pro", Arial, sans-serif;
  color: #095285;
}

.sigform-input::placeholder {
  font-weight: 400;
  font-size: 24px;
  color: #095285;
  font-family: "Source Sans Pro", Arial, sans-serif;
  opacity: 1;
  text-transform: uppercase;
}

.output {
  width: 40vw;
  padding: 5vw;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.output > .table-wrapper {
  font-family: "Source Sans Pro", sans-serif;
  color: #095285;
  font-size: 16px;
  background-color: white;
  border: 2px solid #095285;
  padding: 2vw;
	min-width: 375px;
}

.instructions {
  font-size: 24px;
  font-weight: bolder;
  text-align: center;
  color: #095285;
}

.no-select::selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: no-drop;
}

.selectable::selection,
table.selectable>*::selection {
  -webkit-touch-callout: auto;
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  cursor: copy !important;
}

/* banners,...

JavaScript

// to do : allow blank phone number 
//----------------------------------------------------------------------- PHONE VALIDATOR AND PRINTER


//Phone number

const phonePrinter = function() {
  var phoneNumberDir = document.querySelector('#sigform-input__phone__dir').value.replace(/\D/g, ""); //phone num val based on input type
  let phoneLinkDir = document.querySelector('#phone-output__dir'); //where the phone num will populate in the signature

  var phoneNumberOff = document.querySelector('#sigform-input__phone__off').value.replace(/\D/g, ""); //phone num val based on input type

  let extNumberOff = document.querySelector('#sigform-input__ext__off').value; //extension value
  let phoneExtNumOff = phoneNumberOff + ',' + extNumberOff; //concat ext and phone num for href link population
  let phoneLinkOff = document.querySelector('#phone-output__off'); //where the phone num will populate in the signature

  function validatePhoneNumber(input_str) {
    var re = /^\(?(\d{3})\)?[- ]?[. ]?(\d{3})[- ]?[. ]?(\d{4})$/;
    return re.test(input_str);
  }
  if (phoneNumberOff == '' && phoneNumberDir == '') {
    alert("Please enter at least one phone number.")
  } else if (phoneNumberOff !== '' && !validatePhoneNumber(phoneNumberOff)) {
    alert("Please enter a valid office phone number.");
    document.getElementById('sigform-input__phone__off').value = '';
    return;
  } else if (phoneNumberDir !== '' && !validatePhoneNumber(phoneNumberDir)) {
    alert("Please enter a valid direct phone number.");
    document.getElementById('sigform-input__phone__dir').value = '';
    return;
  }
  phoneLinkDir.setAttribute("href", "tel:" + phoneNumberDir); //populating the phone in the href
  phoneLinkDir.innerHTML = phoneNumberDir.slice(0, 3) + "." + phoneNumberDir.slice(3, 6) + "." + phoneNumberDir.slice(6, 10);
  phoneLinkOff.setAttribute("href", "tel:" + phoneExtNumOff); //populating the phone + ext in the href
  phoneLinkOff.innerHTML = phoneNumberOff.slice(0, 3) + "." +...