JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.min.js"></script>
<div>
    <button id="InputSubmitBtn" type="submit" class="btn btn-custom" data-bind="click: addParam"><span class="glyphicon glyphicon-plus-sign"></span>&nbsp;Add</button>
</div>
<table class="table table-hover table-condensed">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th>Data type</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ParamData">
        <tr>
            <td data-bind="text: ParamKey" style="width: 20%"></td>
            <td data-bind="clickToEdit: ParamValue" style="width: 20%"></td>
            <td data-bind="text: DataType" style="width: 20%"></td>
        </tr>
    </tbody>
</table>

JavaScript

var format = function (str, col) {
    col = typeof col === 'object' ? col : Array.prototype.slice.call(arguments, 1);

    return str.replace(/\{\{|\}\}|\{(\w+)\}/g, function (m, n) {
        if (m == "{{") {
            return "{";
        }
        if (m == "}}") {
            return "}";
        }
        return col[n];
    });
};

var selectOptionsArr = ko.observableArray(['Blue', 'Green', 'Yellow', 'Green']);

var ParamConstr = function (key, value, dataType) {
    return {
        ParamKey: ko.observable(key),
        ParamValue: ko.observable(value),
        DataType: ko.observable(dataType)

    };
};
var my = my || {};

function Generator() {}

Generator.prototype.rand = Math.floor(Math.random() * 26) + Date.now();

Generator.prototype.getId = function () {
    return this.rand++;
};
var idGen = new Generator();
//var ParamData = ko.observableArray([]);
my.viewModel = {
    ParamData: ko.observableArray([]),
    addParam: function () {
        this.ParamData.push(new ParamConstr("$$" + "key1", "Blue", "Varchar"));
    }
};

ko.bindingHandlers.hidden = {
    update: function (element, valueAccessor) {
        ko.bindingHandlers.visible.update(element, function () {
            return !ko.utils.unwrapObservable(valueAccessor());
        });
    }
};


ko.bindingHandlers.clickToEdit = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
 var id = ko.unwrap(valueAccessor());
 console.log("id : ",id)
        var observable = valueAccessor(),
            link = document.createElement("a"),
            input = document.createElement("select");

        var id = idGen.getId();

        input.setAttribute("id", id);
        input.setAttribute("class", 'selectpicker');


        element.appendChild(link);
        element.appendChild(input);

        var unwrappedArray = ko.toJS(selectOptionsArr);

        for (var i = 0; i < unwrappedArray.length; i++) {
            var option = document.createElement("option");
           ...