JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="GO" onclick="permutPath()">
<pre><p style="font-family: Courier New" id="out"></p></pre>

JavaScript

function permutPath() {
    a = prompt(), n = a.split(" "), l = n.length, k = [], s = "", i = 1;
    for (j = 0; j < l; j++) {
        k[n[j] - 1] = j + 1;
        s += " " + (j + 1)
    }
    s += "<br>";
    while (i++) {
        for (j = 0; j < l; j++) s += i % 2 ? j % 2 ? " \\" : " /" : j % 2 ? " /" : " \\";
        for (z = 0, y = 0; z < l - 1; z++) if (k[z] > k[z + 1]) y = 1;
        if (y == 0 && i != 2) break;
        s += "<br>";
        for (m = i % 2; m < l; m += 2) {
            s += i % 2 && m == 1 ? "|" : "";
            if (k[m] > k[m + 1]) {
                [k[m], k[m + 1]] = [k[m + 1], k[m]];
                s += i % 2 ? "   X" : "  X ";
            } else {
                s += i % 2 ? "   |" : "  | ";
            }
        }
        s += "<br>";
    }
    s += "\n " + a;
    document.getElementById("out").innerHTML = s;
}