Why select input field is not working in laravel view?

I have facing an weird problem in my laravel application. In my view file there are a select input field where values are fetched from database table. I have checked that data successfully passed to the view and tried with below code which is not working

<div class="row form-group">
  <div class="col col-md-3">
    <label for="text-input" class=" form-control-label">Course</label>
  </div>
  <div class="col-12 col-md-9">
    <select class="form-control" name="course_id" id="course" required>
      <option value="">Please select</option>
      @if ($courses)
        @foreach ($courses as $course)
          <option value=""></option>
        @endforeach
      @endif
    </select>
  </div>
</div>

But when I have paste the same code again then the second input field is working properly. I didn't get any error.

Edited: I have some JavaScript which given below

<script>

    $(document).ready(function(){
      // Add click
      $(".addBtn").click(function(){
        var id = this.id;
        // Get data from field
        var sem = $("#"+id).data('sem');
        var slotId = $("#"+id).data('slot');
        var timeSlot = $("#"+id).data('timeslot');

        var dayId = $("#day").data('dayid');
        var dayValue = $("#day").data('dayvalue');

        // Add data to model
        $('#dayInput').text(dayValue);
        $('#semesterInput').text(sem);
        $('#timeInput').text(timeSlot);
        // Hidden input value for db
        $('#dayInputValue').val(dayId);
        $('#semesterInputValue').val(sem);
        $('#timeInputValue').val(slotId);

        // Get assign teacher
        $.ajax({
          url: "/"+ sem,
          type: 'GET',
          success: function(data){
            $('#course').html("<option value=\"\">Please select</option>");
            $.each(data, function(key, value) {
              $('#course')
              .append($("<option></option>")
              .attr("value",value.course.id +'-'+ value.teacher.id)
              .text(value.course.name +'-'+ value.teacher.name));
            });
          }
        });

      });


      // Edit click
      $(".editBtn").click(function(){
        var id = this.id;
        // Get data from field
        var sem = $("#"+id).data('sem');
        var slotId = $("#"+id).data('slot');
        var timeSlot = $("#"+id).data('timeslot');

        var dayId = $("#day").data('dayid');
        var dayValue = $("#day").data('dayvalue');

        // Edit data
        var course = $("#"+id).data('course');
        // var teacher = $("#"+id).data('teacher');
        var roomNo = $("#"+id).data('room_no');
        var editNote = $("#"+id).data('note');
        var routineId = $("#"+id).data('routine_id');


        // Add data to model
        $('#editDayInput').text(dayValue);
        $('#editSemesterInput').text(sem);
        $('#editTimeInput').text(timeSlot);
        $('#editCourseInput').text(course);
        // $('#editTeacherInput').text(teacher);
        $('#editRoomNoInput').text(roomNo);

        // Hidden input value for db
        $('#editDayInputValue').val(dayId);
        $('#editSemesterInputValue').val(sem);
        $('#editTimeInputValue').val(slotId);

        // Assign ID
        $('#editRoutineIdValue').val(routineId);
        $('#editNoteInputValue').val(editNote);

        // Get assign teacher
        $.ajax({
          url: "/"+ sem,
          type: 'GET',
          success: function(data){
            $('#editCourse').html("<option value=\"\">Please select for edit</option>");
            $.each(data, function(key, value) {
              $('#editCourse')
              .append($("<option></option>")
              .attr("value",value.course.id +'-'+ value.teacher.id)
              .text(value.course.name +'-'+ value.teacher.name));
            });
          }
        });

      });




      // Add button
      $('td').mouseenter(function () {
        $(this).find('.addBtn').show();
      }).mouseleave(function () {
        $(this).find('.addBtn').hide();
      });

      // Edit button
      $('td').mouseenter(function () {
        $(this).find('.editBtn').show();
      }).mouseleave(function () {
        $(this).find('.editBtn').hide();
      });

      // Delete button
      $('td').mouseenter(function () {
        $(this).find('.deleteBtn').show();
      }).mouseleave(function () {
        $(this).find('.deleteBtn').hide();
      });


    });


    </script>

via Chebli Mohamed