mutlioctoprint

<head>
    <title>Printer Management</title>
    <style>
        body {
          position: absolute;
          margin: 0;
          border: 0;
          padding: 0;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: stretch;
        }

        #divPrinterSelect {
          display: flex;
          justify-content: space-around;
          overflow-x: auto;
        }
        #divPrinterSelect > div {
          /*text styling*/
          text-align: center;
          white-space: nowrap;
          user-select: none;
          font-family: helvetica;
          color: white;

          /*div appearance*/
          margin: 10px;
          padding: 10px;
          flex: 1 0 100px;
          background-color: green;
          cursor: pointer;
        }
        #divPrinterSelect > div:hover, #divPrinterSelect > div.active {
          background-color: lightgreen;
        }
        #frameOctopi {
          border: 0;
          flex-grow: 1;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var printers = [
            {
                name: 'MK3 Alpha',
                host: 'http://192.168.1.220/'
            },
            {
                name: 'MK3 Bravo',
                host: 'http://192.168.1.218/'
            },
            {
                name: 'MK3 Charly',
                host: 'http://192.168.1.222/'
            },
            {
                name: 'MK3 Delta',
                host: 'http://192.168.1.221/'
            }
        ];

        $(document).ready(function() {
            for (var p = 0; p < printers.length; p++) {
                var printer = printers[p];
                var buttonText = (printer.name == null ? printer.host : printer.name);
                $('#divPrinterSelect').append('<div data-host="' + printer.host + '">' + buttonText + '</div>');
            }
            $(document).on('click', '#divPrinterSelect div', function() {
                var printerHost = $(this).attr('data-host');
                $('#frameOctopi').attr('src', printerHost);
            });
        });
    </script>
</head>
<body>
    <div id="divPrinterSelect"></div>
    <iframe id="frameOctopi"></iframe>
</body>