Изменение входного значения не меняется в jquery

Я предлагаю вам заменить это:

$.each(data, function(i, item) {
     $('.remaining').val(item.arrears)
});

С этим:

  $("select[name='student_detail_id']").change(function() {
      var student_detail_id = $(this).val();
      console.log(student_detail_id);
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "<?php echo url('admin/remaining_fee') ?>",
          method: 'POST',
          data: { student_detail_id: student_detail_id, _token: token },
          success: function(data) {
            console.log(data);
            $(".remaining").each(function() {
                // here we empty the container to make it ready to add items
                $('.inputContainer').html('');
                //$(this).find('input').not(':first').remove();
            });

            $.each(data, function(i, item) {
                 //here we create an element
                 const $input = $('<input />')
                   .addClass('form-control remaining')
                   .attr('name','remaining')
                   .attr('id', 'remaining_'+i)
                   .attr('type', 'text')
                   .attr('readonly', 'readonly')
                   .val(item.arrears)

                 // here we append it into container
                 $('.inputContainer').append($input);

              });

          }
      });
  });

И HTML что-то вроде:

<div class="form-group">
 <label for="email">Remaining</label>
 <input type="text" class="form-control remaining" name="" id="" required="" Readonly />
 <div class="inputContainer" >

 </div>
</div>

Вот как вы добавляете элемент с помощью jQuery. и тогда вы можете сделать $('#container').append($element)