global variable is not detected when using jquery but no error

Hi there :) This might seem like a silly question, but my global variable doesn't work in a jquery function.

Here I created a variable outside the function, and I named it "css":

var css = ' {width: 200px; font-family: "Futura", sans-serif; text-align: center; flex-grow: 1; flex-basis: 0; padding: 8px 10px;}';

In the function that follows the declaration I called the "css" variable in a jquery function:

function create() {

var Elements = "";

var divId = "num";

for (var i = 0 + initial; i < 7 + initial; i++) {
  divId += i;
  Elements += '<div id=' + divId + '>' + i + '</div>';

  $('<style>' + '#' + css + '</style>').appendTo(document.head);
}

var container = document.getElementById("row");
container.innerHTML = Elements;

}

But the output is not styled as it should. The weird thing is I don't get any error of undefined variable either. And everything works just fine when I put the variable declaration inside the function create(). But I don't want it that way because I would have multiple functions similar to function create(), and it would be more efficient if I just declare the variable once.

I suspect it's because of the nature of jquery? Any help?