index.html

<!DOCTYPE html>
<html>
<style>
    * {
        box-sizing: border-box;
    }

    textarea{
        padding: 4px;
        width: 500px;
        height: 200px;
    }

    label {
        display: block;
        margin-bottom: 10px;
    }

    .areaPad{
        margin-top: 10px;
        margin-bottom: 10px;
    }


    /* Create two equal columns that floats next to each other */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        height: 300px; /* Should be removed. Only for demonstration */
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
        .column {
            width: 100%;
        }
		
		textarea{
			padding: 6px;
			width: 98%;
			height: 200px;
		}
    }
</style>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
    <title>CSV convertor</title>
</head>
<body style="text-align: center;" onload="formdata()">
	<h1>CSV file Formatter</h1>
    <div class="areaPad">
        <label style="margin-left: auto;margin-right: auto; max-width: 700px" for="prikaz">Pattern which will be repeated. Spaces where you want save data from specific column write i%. Where i means index of column, counted from 0.</label>
        <textarea id="prikaz" name="w3review" rows="4" cols="50" style="height: 40px">SELECT %0 FROM %1</textarea>
    </div>

    <div class="areaPad">
        <label for="vstup">CSV input file:</label>
        <textarea id="vstup" name="w3review" rows="4" cols="50">21;351
324;126</textarea>
    </div>
    <div>
        <label for="vystup">Output:</label>
        <textarea readonly id="vystup" name="w3review" rows="4" cols="50">vystup</textarea>
    </div>
    <div class="areaPad">
        <input type="button" value="Convert" onclick="formdata()"/>
    </div>
</body>
</html>

<script>
    let tmp = "";
    let patern = "";
    function formdata() {
        const input = document.getElementById("vstup").value;
        patern = document.getElementById("prikaz").value;
		
        const result = input.split(/\r?\n/);

        result.forEach(nahradData);
        const radky = tmp;

        document.getElementById("vystup").value = tmp;
        tmp = "";
    }

    function nahradData(value) {
        let copyPatern = patern;
        const slova = value.split(';');
        for (var i = 0; i < slova.length; i++) {
            copyPatern = copyPatern.replaceAll("%" + i, slova[i]);
            console.log(i);
            console.log(slova[i]);
        }
        console.log(copyPatern);
        tmp += copyPatern + "\n";
    }
</script>