Laravel Blade insert JS variable in appended HTML

I am appending HTML element to my blade in a for loop. But I get his error

Undefined array key “”

The code

course_count = '<?php echo count($student->courses); ?>';
for (var i = 1; i < course_count; i++) {
        const courseHtml = generate_HTML(i);
        var mydiv = document.getElementById("course_add_"+course_id);
        mydiv.insertAdjacentHTML('beforeend', courseHtml);
    }
    function generate_HTML(indexValue) {
        return `<div class="form-group">
                    <label for="course_name">Course Name</label>
                    <input id="course_name_${indexValue}" type="text" class="block" name="course_name[${indexValue}]" value="{{ $student->courses[`+indexValue+`]->course_name}}"/>
                </div>`

When I input the value statucally, I can view the page properly. For example

value="{{ $student->courses[1]->course_name}}"

This gives the first course name. BUt I need to do it dynamically.