Cant make two buttons use the same function in jquery with html

I have some code to add some content to a div when a button is clicked and in that code it adds a button called "teamReq_"+index+"_AddYear" (index is a number taken from a hidden input field).

So spamming the button will create divs: teamReq_1_AddYear,teamReq_2_AddYear,teamReq_3_AddYear etc

at the end of the function I run the following code:

 document.getElementById("teamReq_"+index+"_AddYear").onclick = addYear;

addYear is a function defined later in the js file, however it only runs for the latest button created e.g. if I created 3 buttons it would only run for teamReq_3_AddYear, the other two would cause the web page to reload. How do I fix this? Full code for generating the div's:

    document.getElementById("addTeam").onclick = addTeam;  function addTeam() {
event.preventDefault();
var index = document.getElementById("varTeamsReq").value;
var existingHTML = document.getElementById("teamsReqTab").innerHTML;
existingHTML += "<div style=\"overflow:hidden; width:1000px\" id=\"teamReq_"+index+"\">";
existingHTML += "  <div style=\"float:left\">";
existingHTML += "    <input id=\"teamReq_"+index+"_Quantity\" type=\"number\" value=\"1\" min=\"1\" style=\"width:60px\">";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_MidText\">";
existingHTML += "    &nbsp;students from year&nbsp;"
existingHTML += "  </div>";
existingHTML += "  <input type=\"hidden\" name=\"varTeamsReq_"+index+"_Years\" value=\"2\" id=\"varTeamsReq_"+index+"_Years\"/>";
existingHTML += "  <div style=\"float:left; overflow:hidden;\" id=\"teamReq_"+index+"_Years\">";
existingHTML += "    <div style=\"float:left\" id=\"teamReq_"+index+"_Year_1_Div\">";
existingHTML += "      <input id=\"teamReq_"+index+"_Year_1\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\">";
existingHTML += "    </div>";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_AddYear_Div\">";
existingHTML += "    <button id=\"teamReq_"+index+"_AddYear\"><i class=\"fa fa-plus fa-1x\" style=\"transform: scale(1.3); color:#00FF00\"></i></button>";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:left\" id=\"teamReq_"+index+"_DelYear_Div\">";
existingHTML += "  </div>";
existingHTML += "  <div style=\"float:right\">";
existingHTML += "    <button id=\"teamReq_"+index+"_Remove\"><i class=\"fa fa-minus fa-1x\" style=\"transform: scale(1.3); color:#FF0000\"></i></button>";
existingHTML += "  </div>";
existingHTML += "</div>";
document.getElementById("teamsReqTab").innerHTML = existingHTML;
document.getElementById("varTeamsReq").value = parseInt(document.getElementById("varTeamsReq").value) + 1;
document.getElementById("teamReq_"+index+"_AddYear").onclick = addYear;
document.getElementById("teamReq_"+index+"_Remove").onclick = delTeam;

}

Full code for the addYear function:

function addYear() {
event.preventDefault();
var index = this.id.substring(8,this.id.length-8);
var year = document.getElementById("varTeamsReq_"+index+"_Years").value;
if (year == 7) {
  document.getElementById("teamReq_"+index+"_AddYear_Div").innerHTML = "";
}
if (year == 2) {
  document.getElementById("teamReq_"+index+"_DelYear_Div").innerHTML = "<button id=\"teamReq_"+index+"_DelYear\"><i class=\"fa fa-minus fa-1x\" style=\"transform: scale(1.3); color:#FF0000\"></i></button>";
  document.getElementById("teamReq_"+index+"_DelYear").onclick = delYear;
}
for (i = 2; i < year; i++) {
  document.getElementById("teamReq_"+index+"_Year_"+i+"_Div").innerHTML = "&nbsp;,&nbsp;<input id=\"teamReq_"+index+"_Year_"+i+"\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\"/>";
}
var existingHTML = document.getElementById("teamReq_"+index+"_Years").innerHTML;
existingHTML += "    <div style=\"float:left\" id=\"teamReq_"+index+"_Year_"+year+"_Div\">";
existingHTML += "      &nbsp;or&nbsp;";
existingHTML += "      <input id=\"teamReq_"+index+"_Year_"+year+"\" type=\"number\" value=\"7\" min=\"7\" max=\"13\" style=\"width:60px\"/>";
existingHTML += "    </div>";
document.getElementById("teamReq_"+index+"_Years").innerHTML = existingHTML;
document.getElementById("varTeamsReq_"+index+"_Years").value = parseInt(document.getElementById("varTeamsReq_"+index+"_Years").value) + 1;

}