AJAX для нескольких объектов на чистом javascript

Добрый день. Есть элементы, по которым необходимо асинхронно получать информацию и выводить в отдельный блок при нажатии на кнопку, но я понять не могу, как сделать это. Помогите, пожалуйста.

Без каких-либо библиотек.

Ниже мои потуги.

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    document.getElementById('ajax').innerHTML = xhr.responseText;
  }
};
</script>
<ul>
<script>
xhr.open('GET','function_snmp.php?id=1')
    function sendAJAX()
    {
      xhr.send();
    }
</script>
<li>город Екатеринбург, улица Сельская, дом 6</li>
<button onclick="sendAJAX()" class="button">Подробнее</button>
<div id="ajax"></div>
</ul>
<ul>
<script>
xhr.open('GET','function_snmp.php?id=2')
    function sendAJAX()
    {
      xhr.send();
    }
</script>
<li>город Москва, улица Московская, дом 5</li>
<button onclick="sendAJAX()" class="button">Подробнее</button>
<div id="ajax"></div>
</ul>