JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">

</div>
<div id="iframe">
<iframe id="output">

</iframe>
</div>

CSS

#buttons {
  float: left;
}
#iframe {
  float:right;
}

JavaScript

// anzahl der gpio pins
var n = 20;
// adressen-basis
var url = "http://192.168.4.1/gpio/";

// erstelle knoepfe fuer n GPIO pins
var btnContainer = document.querySelector("#buttons")
for(var i = 1; i <= n; i++) {
	btnContainer.insertAdjacentHTML("beforeend", '<button data-gpioid="' + i + '">' + i + '</button><br />');
}

// registriere aktionen auf den buttons
var iframe = document.querySelector("#output");
var btns = document.querySelectorAll("button");
btns.forEach(function(btn) {
	btn.addEventListener("click", function(ev) {
  	iframe.src = url + this.getAttribute("data-gpioid");
  });
});