JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Source:
<div style="border:1px solid #000; margin:5px;" class="childSelector" data-bind="template: { name: 'template', foreach: childItems }">
</div>

Destination:
<div class="targetNode" style="border:1px solid #000; margin:5px;" ></div>


<button type="button" id="rebind" >Re-Bind Source</button>

<script type="text/html" id="template">
    <div class="childItem" data-bind="attr: { title: Text }">
        <span data-bind="text: ImageUrl" ></span>
    </div>
</script>

JavaScript

ko.applyBindings(new function () {
        this.childItems = [{ Text: "Test", ImageUrl: "Images/Image.png" }];
    });

    $(".childSelector").on("click", ".childItem", function () {
        var clone = $(this).clone()[0];
        ko.cleanNode(clone);
        $(".targetNode").append(clone);
    });

    $("#rebind").click(function() {
          ko.applyBindings(new function () {
            this.childItems = [{ Text: "Test", ImageUrl: "Images/Image2.png" }];
          });
    });