I am using the select2 value to populate other read-only fields in the same form, my question is why the ajax success function populates the field only once but when I do something(solution) wrong it is called the success function multiple times?

<script>
  $(document).ready(function () {
    $('#barang_id').select2({
      placeholder: 'Cari...',
      allowClear: true,

      ajax: {
        url: '/api/barang',
        contentType: 'application/json; charset=utf-8',
        data: function (params) {
          var query = {
            term: params.term,
          };
          return query;
        },
        headers: {
          RequestVerificationToken: $(
            'input[name="__RequestVerificationToken"]'
          ).val(),
        },
        processResults: function (data) {
          return {
            results: $.map(data, function (item) {
              return {
                id: item.id,
                text: item.kode + ' - ' + item.nama,
              };
            }),
          };
        },
        success: function (data) {
          $.map(data, function (item) {
            $('#nama').val(item.nama);
            $('#kode').val(item.kode);
          });
        },
      },
    });
  });
</script>