Jquery function inside dynamically inserted element doesn't work

Question

I have an index which shows a list of orders with a button that calls a function (to simplify i've reduced the function that button calls to just an alert), but also every minute an ajax function executes that searches for new orders and appends them on top, with the exact same code as the ones initially loaded. The button works perfectly in the elements that are loaded initially but doesn't work at all in the elements generated dynamically.

This is the index with one initial order inside, BEFORE newOrders runs for the first time. The button on that order functions properly

<div id="content">
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>
     $("body").on("click","#btn4126",function(){
      alert("Pedido 4126");
    });
    </script>
  </div>
</div>
<script>
  function newOrders() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "simplereq.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var response = JSON.parse(this.responseText);
       console.log(response);
      var element = document.querySelector('#content');
      var content = element.innerHTML;
      ultimoid = response.ultimoid;
      element.innerHTML = response.contenido + content;
      }
    };
    xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
  }
  setInterval(newOrders, 60000);
</script>

And this is the index when the function has executed once and appended a new order on top:

<div id="content">
  <div id="pedido_4255" class="pedido">
    <h4>Pedido 4255</h4>
    <button id="btn4255">Alert</button>
    <script>
     $("body").on("click","#btn4255",function(){
      alert("Pedido 4255");
    });
    </script>
  </div>
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>
     $("body").on("click","#btn4126",function(){
      alert("Pedido 4126");
    });
    </script>
  </div>
</div>
<script>
  function newOrders() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "simplereq.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var response = JSON.parse(this.responseText);
       console.log(response);
      var element = document.querySelector('#content');
      var content = element.innerHTML;
      ultimoid = response.ultimoid;
      element.innerHTML = response.contenido + content;
      }
    };
    xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
  }
  setInterval(newOrders, 60000);
</script>

As you can see, the button and function are exactly the same, but the one on the new order brought by the ajax call, doesn't work, and the other one still works properly.

EDIT: I have seen the other questions on event binding to dynamically generated elements, and am in fact already applying what I saw in those answers, by binding the function to the descendants of a a static ancestor:

 $("body").on("click","#btn4126",function(){
      alert("Pedido 4126");
    });