Loop over an array and create form input tags after labels

Question

Im trying to loop over an array to create some form tags, depending on how many values there are in the array. So far i have got my label and input tags that are being created. The problem i am having is displaying the input tags correctly after the labels. Any help would be much appreciated!

I'm trying to achieve:

<label class="material-label" for="leather_materials">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

my code so far:

materialArray = ['leather','suade','nubuck'];

//loop over material array 
for( i = 0; i < materialArray.length;  i++) {

    //create label elements
    var matLabel = document.createElement('label');
    matLabel.setAttribute('for', materialArray[i] + '_materials');
    matLabel.setAttribute('class', 'material-label');
    console.log(matLabel);

    //add text to label elements
    var matLabelTextNode = document.createTextNode(materialArray[i]);
    matLabel.appendChild(matLabelTextNode);

    //create input elements
    var matInput = document.createElement('input');
    matInput.className = 'shoe-materials';
    matInput.setAttribute('class', 'shoe-materials');
    matInput.setAttribute('id', materialArray[i] +'_materials');
    matInput.setAttribute('name', 'materials');
    matInput.setAttribute('type', 'radio');
    matInput.setAttribute('value', materialArray[i]);
    console.log(matInput);   

    //append to parent div
    addMaterials.appendChild(matLabel);    
    $('.material-label').after(matInput);        
}

I tried using jQuery after() but it went a bit messed up and got the following

<label class="material-label" for="leather_materials">leather</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather">
<label class="material-label" for="suade_materials">suade</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade">
<label class="material-label" for="nubuck_materials">nubuck</label>
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck">

Answer 1

Change '.material-label' to matLabel

$(matLabel).after(matInput);  

Here is the JSFiddle: https://jsfiddle.net/82o6hfna/