JSFiddle - React, Tailwind, and code Playground

HTML

<input class="buttons" type="button" id="more_fields" onclick="add_course();" value="Add Course" />

<div id='degree_course'></div>

<input class="buttons" type="button" id="more_fields" onclick="add_skill();" value="Add Skill" />


<div id='degree_skills'></div>

CSS

#degree_course span {
    display: block;
}

#degree_skills span {
    display: block;
}

JavaScript

var getIdFactory = function(pref) {
    return {
        counter: 0,
        prefix: pref,
        next: function() {
          this.counter++;
          return this.prefix+'_'+this.counter;
        }
    }
}

var courseId = getIdFactory('course');
var skillId = getIdFactory('skill');

var add_course = function() {
    var newspan = document.createElement('span');
    newspan.innerHTML = 'Degree: <input type="text" name = "degree[]"> Course: <input type="text" name = "course[]">';
    newspan.setAttribute('id', courseId.next());
    document.getElementById('degree_course').appendChild(newspan);
};

var add_skill = function() {
    var newspan = document.createElement('span');
    newspan.innerHTML = 'Skill: <input type="text" name = "skill[]"> Level: <input type="number"min ="1" max = "5" name = "level[]">';
    newspan.setAttribute('id', skillId.next());
    document.getElementById('degree_skills').appendChild(newspan);
};