не может установить два <p>значения при ajax успехе

Question

Я недавно пытался отобразить базу данных формы значений в несколько тегов <p>.

<div class="form-group row">
    <div class="col-md-12">
        <label for="cust_name" class="col-md-3">Nama Debitur: </label>
        <p class="col-md-3"><span id="cust_name" >...</span></p>
        <label for="app_id" class="col-md-3">Application Id: </label>
        <p class="col-md-3"><span id="app_id" >...</span></p>
    </div>
    <div class="col-md-12">
        <label for="agrmnt_no" class="col-md-3">Agreement No: </label>
        <p class="col-md-3" id="agrmnt_no"></p>
        <label for="contract_stat" class="col-md-3">Contract status: </label>
        <p class="col-md-3" id="contract_stat"></p>
    </div>
</div>

, и вот мой ajax jquery.

    function load_detil_debitur(){
  var app_id = $('#app_id').val();

  $.ajax({
        url: "<?php echo base_url();?>c_detail_sample/get_detil_debitur",
      type: 'POST',
      datatype: 'json',
      data: {'app_id': app_id},
          success: function(data) {
        var json = $.parseJSON(data);
        $('#cust_name').html(json.debitur[0].app_no);
        $('#app_id').html('test'); //didn't affect anything

        $('#timeline').hide();
        $('#content-item').show();
          },error: function(data) {
              alertify.error("Terjadi kesalahan pengambilan data!");
          }
    });
}

Я пытался написать другое значение для консоли, и у него не было проблем с этим, но когда я попытался установить значение для второго элемента, то ничего не произошло.