JavaScript - adding spaces after push in empty array & one checkbox is free

Here's my codepen: https://codepen.io/CwittleZ/pen/vdzazO?editors=1010

When you click on the meat selection, it gets pushed into an array and then displayed, but there's no space between selections. How would I go about adding that space?

function meatSelected() {
  var meat = [];
  var meatChecked = document.querySelectorAll(
    "input[name=meat_options]:checked"
  );
  for (var i = 0; i < meatChecked.length; i++) {
    meat.push(meatChecked[i].value);
  }
  console.log(meat);
  document.getElementById("meat").innerHTML = meat;
}

Also, I need one of the meats to be free, but anything over will be extra. I don't know how or where to add that 'if meat checked is > 1, all other meats will be an additional $1 each.' Is there somehow a way to access the function meatSelected for that purpose? I'm just starting out with JavaScript, so please no jQuery and simple terms if possible, even if it is a longer code. I just want to be able to understand why it works.

  if (document.getElementById("pepperoni").checked) {
    add += 1;
  }
  if (document.getElementById("sausage").checked) {
    add += 1;
  }
  if (document.getElementById("canadian_bacon").checked) {
    add += 1;
  }
  if (document.getElementById("ground_beef").checked) {
    add += 1;
  }
  if (document.getElementById("anchovy").checked) {
    add += 1;
  }
  if (document.getElementById("chicken").checked) {
    add += 1;
  }