JSFiddle - React, Tailwind, and code Playground

by Nigel Whatling

HTML

<ul>

    <!-- ko foreach: assignedItems -->
    <li>
       <!-- display item-->
        <span data-bind="text: Name + ' (' + Id + ')'"></span>
    </li>
    <!-- /ko -->

    <!-- ko foreach: requiredDropPoints-->
    <li>
       <!-- display different item-->
        <span data-bind="text: Name + ' (' + Id + ')'"></span>
    </li>
    <!-- /ko -->

</ul>

JavaScript

var model = {

    assignedItems : ko.observableArray([
        { Id: 1, Name: "Assigned1" },
        { Id: 2, Name: "Assigned2" },
        { Id: 3, Name: "Assigned3" }]),
    
    requiredDropPoints : ko.observableArray([
        { Id: 1, Name: "Required1" },
        { Id: 2, Name: "Required2" },
        { Id: 3, Name: "Required3" }])
};

ko.applyBindings(model);