Dynamically added checkbox value doesn't work

I am sending a post request to my database and according to the response, I am dynamically creating new checkboxes in my JSP page. Like this:

function getMediums(str)
{
    currentClass = str;  // save the current class
        <%
        String classStart = "<script>document.writeln(str)</script>";
        HashMap<String, ArrayList<String> > medSubjects;
        if(!tutoringInfoAcademic.containsKey(classStart)){   // first click
            medSubjects = new HashMap<>();
            tutoringInfoAcademic.put(classStart,medSubjects);  // opening a blank map
        }
        else{   // already selected some medium of this class
            medSubjects = tutoringInfoAcademic.get(classStart);
        }
            %>

            // javascript code
var data = {};
data["classStart"] = str;
$.post('PopulateMedium',data,function(responseJson){
    if(responseJson!=null){
        var td = document.getElementById("mediums");
        $(td).empty();   // deletes previous contents

        $.each(responseJson,function(key,value){

            var temp = value;
            console.log(temp);  // prints as per expected
            var checked = "";
            <%   
                String t = "<script>document.writeln(temp)</script>";
                if(medSubjects.containsKey(t)){
                    // already selected, so check this checkbox
                %>
                checked = "checked";
                <%
                }
            %>
            td.innerHTML += " <input type='checkbox' onclick='medCheckboxOnClick()' name='mediumCheckbox' value='" + temp + "' " +checked + "/>";
            if(value == 'bm')td.innerHTML += "Bangla medium"
            else if(value == 'em')td.innerHTML += "English medium";
            else if(value == 'ev')td.innerHTML += "English version";


            td.innerHTML += "<br/>";
        })
    }
});
}

The onclick function:

function medCheckboxOnClick(){

    var t = $(this).attr("value");   // bm, em, ev
    console.log("entered into the checkbox onclick function");

    if($(this).is(":checked")) {
        console.log("checkbox for class "+currentClass+" and medium "+t+" has been checked");

        <%
        String id = "<script>document.writeln(t)</script>";
        String currentClassStart = "<script>document.writeln(currentClass)</script>";
        if(tutoringInfoAcademic.containsKey(currentClassStart)){   // redundant check
            ArrayList<String> listOfSubjects = tutoringInfoAcademic.get(currentClassStart).get(id);

            if(listOfSubjects == null){  // first clicked
                listOfSubjects = new ArrayList<>();
                tutoringInfoAcademic.get(currentClassStart).put(id,listOfSubjects);
                System.out.println(tutoringInfoAcademic.get(currentClassStart));
            }
            else{   // list of subjects already created. either some subject has been chosen or not


            }
        }

        %>
    }
    else{
        console.log("checkbox for class "+currentClass+" and medium "+t+" has been unchecked");

        <%
        String ID = "<script>document.writeln(t)</script>";
        String curClassStart = "<script>document.writeln(currentClass)</script>";
        if(tutoringInfoAcademic.containsKey(currentClassStart)){ // redundant check
            tutoringInfoAcademic.get(currentClassStart).remove(ID);
        }
        %>
    }        

}

When I click on one of the dynamically created checkboxes, execution enters the the medCheckboxOnClick() function and something like this comes out:

checkbox for class 1 and medium undefined has been checked

t remains undefined, though I set the value of the checkbox in the previous function while creating the checkboxes. Here currentClass is a global javascript variable and tutoringInfoAcademic has been set as the session attribute from my controller class. It has been declared like this:

HashMap<String, HashMap<String, ArrayList<String> > > tutoringInfoAcademic = new HashMap<>();

Why does the value of the checkbox remain undefined?