For TigerBoy

<!DOCTYPE html>
<html>
<head>
    <title>For TigerBoy</title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/semantic-ui/1.12.1/semantic.min.css">
    <script src="http://cdn.jsdelivr.net/semantic-ui/1.12.1/semantic.min.js"></script>
</head>
<body style="width: 100%; overflow: scroll;">

<div class="ui centered grid">

    <div class="thirteen wide column" >

    <h1 style="margin: 30px 0;">Code Replace<small> for TigerBoy</small></h1>

    <form class="ui form">

        <div class="field" style="margin-top: 30px">
            <label>Where to replace (Code)</label>
            <textarea id="code"></textarea>
        </div>

        <div class="ui grid">

            <div class="eight wide column">
                <div class="field">
                    <label>Variables</label>
                    <textarea id="vars"></textarea>
                </div>
            </div>

            <div class="eight wide column">
                <div class="field">
                    <label>To Replace</label>
                    <input type="text" id="toReplace" placeholder="">
                </div>
                <div class="ui primary fluid button" onclick="javascript:nextVar();">
                    Process Next Variable
                </div>
                <p>Processed Variable: <label id="processedVar"></label></p>
                <p>Next Variable: <label id="nextVar"></label></p>
            </div>

        </div>

        <div class="field" style="margin-top: 30px">
            <label>Replaced</label>
            <textarea id="replaced"></textarea>
        </div>
    </form>

    </div>

</div>

<script type="text/javascript">

    var code = null;
    var variables = null;
    var toReplace = null;
    var replaced = null;
    var actualLine = 0;

    $(function(){
        code = $('#code');
        variables = $('#vars');
        toReplace = $('#toReplace');
        replaced = $('#replaced');
    });

    function nextVar(){
        var inLines = variables.val().split('\n');
        if (inLines.length > actualLine){
            $('#processedVar').html(inLines[actualLine]);
            if (inLines.length > (actualLine + 1)){
                $('#nextVar').html(inLines[actualLine + 1]);
            }
            var actualVar = inLines[actualLine];
            var myStr = code.val();
            while (myStr.indexOf(toReplace.val()) != -1){
                myStr = myStr.replace(toReplace.val(), actualVar);
            }
            replaced.val(myStr);
            ++actualLine;
        }
    }

</script>
</body>
</html>