Q: 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;
  }


A: The answer is in the line 83 in JavaScript part of your example. In line 77, you made an array of possible meats. Then, you just used this array and attached it to innerHTML as it is, so that the browser has to make it a string. Unfortunately, it doesn't care about spaces.
So, just change that line to this:
document.getElementById("meat").innerHTML = meat.join(", ");
It will use your already made array and convert it directly into string, with ", " between each of its children.
And to your second question, there are more possible solutions, I've implemented the easiest one in this codepen: https://codepen.io/anon/pen/ddqqyY?editors=1010.
Just sum up the number of already selected meats and if it's larger than zero, subtract 1 from your total.

A: I'd wrap each one of your selections in a "span", and add a margin after.  You're using innerHTML, so you can just do it that way.  It'll provide more flexibility than trying to style the plain-text.

A: document.getElementById("meat").innerHTML = meat.map(m => ` ${m}`);

here is your codepen that is modified https://codepen.io/jayas/pen/bLxjXo?editors=1010
edit as per suggestion


*

*The ${m} together with the enclosing ticks `` used in the statement is called a template literal.  Template literals can contain placeholders
and these are indicated by  the dollar sign and curly braces ${}.

*[].map(callBackFunc) used above is a method that creates a new array with each element being the result of the callback function. 
