Преобразование этой мульти в данные контейнера скрипт с jQuery для простого и JS структуру

---

У меня есть этот скрипт, который я сделал в jQuery некоторое время назад, так что этот скрипт имеет возможность отправлять значения в контейнер. Когда вы нажимаете каждую кнопку отправки без каких-либо помех от

в другие контейнеры отправляются значения x.php были ли эти ценности перекликаются с другими x.php-да. Поэтому я хочу преобразовать это в чистую структуру JS, но проблема в том, что некоторые

компоненты jQuery не существуют в JS, так как jQuery-это библиотека JS, я не уверен, что генерируется под капотом. Поэтому я не уверен, как я могу имитировать

до сих пор я делал все возможное, чтобы преобразовать это в JS, но проблема в том, что я не могу сделать это с другими контейнерами на этой странице JS. Он работает только на первом контейнере.

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

https://i.stack.imgur.com/kSX40.gif

Вот идеальный пример jQuery, который работает.

 <style>

    .dataContainer{
      background-color: red;
      width: 185px;
      position: relative;
      margin-bottom: 25px; 
    }

    .dataContainerDesign .a,.b,.send{
      display: block;
      margin: auto;
    }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
    $(document).ready(function(){

    /*<Multi ajax forms>*/
    $('.dataContainer .send').click(function(){

    //Per data container
    var $dataContainer = $(this).closest('.dataContainer');
    //

    //Var data structure
    var a= $dataContainer.find('.a').val();
    var b= $dataContainer.find('.b').val();
    //

    //Data to be sent
    var Data= 'a='+a+'&b='+b;
    //

    //Result after sending 
    var Result= function(success){
      $dataContainer.html(success);   
    }
    //

    //Request
    $.ajax({
       type: 'POST',
       data: Data,
       url: 'x.php',
       success: Result
     });
    //

  });

   /*</Multi ajax forms>*/

});
    </script>

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

Моя попытка преобразовать это в простую структуру JS работает только на первой, мне нужно, чтобы она работала и на других.

<style>

    .dataContainer{
      background-color: red;
      width: 185px;
      position: relative;
      margin-bottom: 25px; 
    }

    .dataContainerDesign .a,.b,.send{
      display: block;
      margin: auto;
    }

    </style>

<script>
document.addEventListener('DOMContentLoaded', function(){

document.querySelector('.dataContainer .send').addEventListener('click', perContainer);

var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){

    if(xhr.readyState === 4){
        document.querySelector('.dataContainer').innerHTML= xhr.responseText;
    }
};

function perContainer(){

  //Var structrue
  var a=  document.querySelector('.a').value;
  var b=  document.querySelector('.b').value;
//

//Data to be sent
var data = 'a='+a+'&b='+b;
//

    xhr.open('POST','x');
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xhr.send(data);
}
});
</script>

  <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

    <div class='dataContainer dataContainerDesign'>
      <input class='a' type='text'>
      <input class='b' type='text'>
      <button class='send'>Send</button>
    </div><!--</dataContainer>-->

Это файл, в котором значения получают эхо в AKA x.php

<p style='display: inline-block;'>
<?php
$a= $_POST['a'];
$b= $_POST['b'];
echo 'Sent Values: ';
echo $a.','.$b;
?>
</p>

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

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

Что я уже пробовал:

Я ходил на многие сайты чатов за помощью, но каждый из них не может понять этого, даже хардкорные профи не хотят пробовать это, они говорят, что это трудно сделать. Это то, что они все говорят, пока я не выясню версию jQuery. Так что я знаю, что это возможно и с версией JS. Так что любые так называемые профи, которые могут решить эту проблему, тогда ваши более превосходят другие.

---