auto populate second dropdown and add new row of dropdowns in javascript

Hey there,

I am working on some ideas for a script. I have the dropdown have a set of choices. once clicked it takes them to the second dropdown that is autopopulated for the first dropdown. this works great, its when i hit the add button. this add button builds the same layout just in a new row. the first new dropdown works, but i believe the problem comes from my second one. where it is trying to pull an element from one function to another function.

HTML:

 <table class="table-container">
   <tbody>
     <tr>
       <td>
         <select class="custom-select" id="mediaSel" name="mediaSel" onchange="dropDownSelect()"></select>
       </td>
       <td>
         <select class="custom-select" id="mediaSel2" name="mediaSel2"></select>
       </td>
       <td class="buttonRow">
         <div id="addRow" class="addButton" onclick="addSelection()"><span class="plus"></span></div>
       </td>
     </tr>
   </tbody>
 </table>

Javascript:

var counter = 1;
var limit = 5;

//show dropdown
var mediaType = {
    Select : '--Select--',
    Illustration : 'Illustration',
    GraphicDesign : 'Graphic Design',
    MotionGraphics : 'Motion Graphics',
    WebDesign : 'Web Design'
};

var mainMenu = document.getElementById('mediaSel');
var subMenu = document.getElementById('mediaSel2');

//loop to add main options on first select
for(var index in mediaType) {
		mainMenu.options[mainMenu.options.length] = new Option(mediaType[index], index);
}

//arrays of options for second dropdown
var illustration = {
	Select : '--Select--',
	ChildrensBook : 'Childrens Book Design',
  FanArt : 'Fan Art',
  WallArt : 'Wall Art'
};

var graphicDesign = {
	Select : '--Select',
	Logo : 'Logo',
  BusinessCards : 'Business Cards',
  Flyers : 'Flyers',
  Billboards : 'Billboards',
  MagazineAds : 'Magazine Ads',
  Catalogue : 'Cataloge Design',
  Newspaper : 'Newspaper Ads'
};

var motionGraphics = {
	Select : '--Select--',
	LogoAnimation : 'Logo Animation',
  Explainers : 'Explainer Videos',
  ShortFilm : 'Short Film Animation',
  CharacterDesign : 'Character Design',
  ProductDesign : 'Product Design',
  Animation : 'Animation'
};

var webDesign = {
	Select : '--Select--',
	WebDesign : 'Web Design'
};

function dropDownSelect() {
var length = subMenu.options.length;

  //add second select Menu
  if(mainMenu.selectedIndex == 0) {
      subMenu.style.display = "none";
  } else {
      subMenu.style.display = "inline-block";
  }
  
  //empty out second array
  for (i = length-1; i >= 0; i--) {
  		subMenu.options[i] = null;
	}
  
 //show each subMenu when clicked 
 if(mainMenu.selectedIndex == 1) {
  	for(var illu in illustration) {
    	subMenu.options[subMenu.options.length] = new Option(illustration[illu], illu);
  }
 }
 if(mainMenu.selectedIndex == 2) {
  	for(var graph in graphicDesign) {
    	subMenu.options[subMenu.options.length] = new Option(graphicDesign[graph], graph);
  }
 }
  if(mainMenu.selectedIndex == 3) {
  	for(var anim in motionGraphics) {
    	subMenu.options[subMenu.options.length] = new Option(motionGraphics[anim], anim);
  }
 }
  if(mainMenu.selectedIndex == 4) {
  	for(var web in webDesign) {
    	subMenu.options[subMenu.options.length] = new Option(webDesign[web], web);
  }
 } 
}

//for the new clicked button
function addSelection(id) {
if (counter == limit)  {
   alert("You have reached the limit of adding " + counter + " inputs");
} else {
	var newRow = $("<tr>");
  var cols = "";
 
    cols += '<td><select class="custom-select" id="addmediaSel' + counter +'" name="addmediaSel' + counter +'" onchange="addedCount(this.id)"></select></td>';
  cols += '<td><select class="custom-select" id="secondSel' + counter +'" name="secondSel' + counter +'"></select></td>';
  cols += '<td class="buttonRow"><div id="removeRow" class="removeButton" onclick="removeSelection()"><span class="minus"></span></div></td>';
  
 	 newRow.append(cols); 
   $('tbody').append(newRow); 
   
   var addedMenu = document.getElementById("addmediaSel" + counter);
   var addedSubMenu = document.getElementById("secondSel" + counter);

    //loop to add main options on first select
  for(var index in mediaType) {
      addedMenu.options[addedMenu.options.length] = new Option(mediaType[index], index);   
  }
    counter+=1; 
  }
}

function addedCount() {
	alert("test");
  
}

function removeSelection() {
    var removeBtn = document.getElementById("removeRow");
    $(removeBtn).parents('tr').remove();
    counter-=1;
}

anyone have any ideas?

here is my JSFiddle