模态框不显示文本值

Question

I want make modal boxes for some edit form. The modal box is opening, but my text value does not show up, it only showing my int value (except my 1st value). Whats wrong with my code?

//--Code--//
<button type="button" id="editNilai" class="btn btn-sm btn-info nilai" 
    data-toggle="modal" data-target="#editNilai"
    data-nama="<?= $user['nama'] ?>"
    data-nipd="<?= $user['nipd'] ?>"
    data-kelas="<?= $user['kelas'] ?>"
    data-verifikasi="<?= $user['verifikasi'] ?>"
    data-visitasi="<?= $user['visitasi'] ?>"
    data-presentasi="<?= $user['presentasi'] ?>" >
     Edit
     </button>
     </td>         
     </tr>
     <?php endforeach; }?> 
</tbody></table>

Script for my edit.js

$(document).on("click", ".nilai", function () {
    var nama = $(this).data('nama');
    var nipd = $(this).data('nipd');
    var kelas = $(this).data('kelas');
    var verifikasi = $(this).data('verifikasi');
    var visitasi = $(this).data('visitasi');
    var presentasi = $(this).data('presentasi');
    $(".modal-body #nama").val(nama);
    $("#nipd_a").val(nipd);
    $("#kelas_a").val(kelas);
    $("#verifikasi").val(verifikasi);
    $("#visitasi").val(visitasi);
    $("#presentasi").val(presentasi);
});

Script for My modal box.php

<div class="modal fade" id="editNilai" tabindex="-1" role="dialog" aria-labelledby="user" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="nilai">Edit Nilai Badan Publik</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <form action="<?php echo site_url('admin/updateNilai');?>" method="post">
            <div class="form">
                <div class="">
                    <div class=" form-group">
                        <label for="" class="">Badan Publik <span><i class="text-danger">*</i></span></label>
                        <input name="nama" id="nama" type="" class="form-control text-danger" readonly>
                    </div>
                </div>
                <div class="">
                    <div class=" form-group">
                        <label for="" class="">NIPD <span><i class="text-danger">*</i></span></label>
                        <input name="nipd" id="nipd_a" type="number" class="form-control text-danger" readonly>
                    </div>
                </div>
                <div class="">
                    <div class=" form-group">
                        <label for="" class="">Kategori <span><i class="text-danger">*</i></span></label>
                        <input name="kelas" id="kelas_a" type="" class="form-control text-danger" readonly>
                    </div>
                </div>
                <div class="">
                    <div class=" form-group">
                        <label for="" class="">Verifikasi <span><i class="text-danger">*</i></span></label>
                        <input name="verifikasi" id="verifikasi" type="number" class="form-control text-danger">
                    </div>
                </div>

//---Continue---//

I dont know why data-nipd & data-kelas does not show up, eventhough "button" successfully submitted the value (From inspect at browser)

<button type="button" id="editNilai" class="btn btn-sm btn-info nilai" data-toggle="modal" data-target="#editNilai" data-nama="Dummy OPD" data-nipd="2101000" data-kelas="OPD Sumbar 2021" data-verifikasi="20" data-visitasi="30" data-presentasi="">
Edit Nilai</button>

Answer 1

I think I found the answer. It the browser cache/cookies, after i clearing my all browsing data, value show up normally now. Sorry, I dont know browser cache can affect this.