JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<textarea name="query" class="form-control" data-bind="value: query, valueUpdate:'afterkeydown'" rows="10" style="margin-bottom:20px"></textarea>
<div data-bind="foreach: parameters">
    <p data-bind="text: Name"></p>
    <input type="text"></input>
</div>

JavaScript

$(function() {
    ko.applyBindings(model);
});

var model = new function () {
    var that = this;

    this.parameterRegex = ko.observable(/\@@{1}\w+/ig);
    this.query = ko.observable('SELECT @@par1 from @@par2');
    this.parameterNames = ko.computed(function () {
        var allParameters = that.query().match(that.parameterRegex());
        return (allParameters == undefined) ? [] : jQuery.unique(allParameters);
    });
    
    var parameters = [];
    this.parameters = ko.computed(function () {
        var newParams = [];
        for (var i = 0; i < that.parameterNames().length; i++) {
            var name = that.parameterNames()[i];
            var result = $.grep(parameters, function(p){ return p.Name() == name; });
            var param;
            if (result.length === 0) {
                param = {
                    Name: ko.observable(name),
                    Example: ko.observable()
                };
            }
            else {
                param = result[0];
            }
            
            newParams.push(param);
        }
        parameters = newParams;
        return newParams;
    });
};