Как я могу применить мой ajax к своему атрибуту данных?

Question

Как я могу передать мои JSON данные в мой атрибут данных? Я изменяю свой код некоторое время, пока go по умолчанию выбирает тег, затем я изменил его на тег списка данных, чтобы иметь поле поиска, когда я выбираю опции, например, код ajax работает, но когда я изменяю его на список данных, это не так рабочая

$(function() {
  $('#posters1').change(function() {
    document.getElementById("demos").innerHTML = ($('#posters1').val());
    document.getElementById("demos").innerHTML = ($('#posters option[value=' + $('#posters1').val() + ']').attr('id'));
  });
});

function testjorsen(id) {
  let ls = '';
  $.ajax({
    type: 'GET',
    url: 'http://localhost/gigant-live/gigantApi/product/' + id,
    dataType: 'json',
    success: function(data) {
      data.forEach(x => {
        ls += `<option value="${x.post_title}">${x.post_title}</option>`;
      });
      $('#reason').html(ls);
    }

  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Modal content -->
<div class='refer-modal-content'>
  <span class='close'>&times;</span>
  <div class='reasonfordecline'>
    <form action='' method='POST' class='needs-validation' novalidate onsubmit='return false'>
      <p class='reasonfordecline'>Please choose a reason for referring the appointment to another professional</p>
      <select id='refer_pro' name='refer_pro' required>
        <option value='I have an Emergency'>I have an Emergency</option>
        option value='Option 1'>Option 1</option>
        <option value='Option 2'>Option 2</option>
        <option value='Option 3'>Option 3</option>
      </select>
      <p class='search-listing'> Please select the professional you will refer to this using the search box below:</p>
     <input id="posters1" list="posters" >
      <datalist id="posters">
    <option class="posters" id="62" value="professional 2"></option>
    <option class="posters" id="49" value="Karl Kenneth Deligero"></option>
    <option class="posters" id="56" value="professional_test"></option>
    <option class="posters" id="29" value="Eurish Chavez"></option>
    <option class="posters" id="17" value="test3_professional"></option>
    <option class="posters" id="60" value="professional_1"></option>
    <option class="posters" id="15" value="Karl Kenneth Talidong"></option>
    <option class="posters" id="67" value="Raniel"></option>
    <option class="posters" id="14" value="test professional"></option>
    <option class="posters" id="18" value="test4_professional"></option>
                  </datalist>


      <p class="search-listing">Select a listing from this professional</p>
      <select id="reason" name="posttitle" onchange="searchlisting()"> </select>

  </div>
  <button name='submitrefer' id='submitrefer' class='transac-buttons' onclick='transacDeleteStatus(86500)'>Yes</button>
  <button class='transac-buttons' onclick='closebutton2()'>Close</button>

</div>
</form>