JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/jquery/jquery-datalink/raw/master/jquery.datalink.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script id="ListTmpl" type="text/x-jquery-tmpl">
    <li>
      <form>
        <input name="Name" value="${Name}" />
        <input name="Phone" value="${Phone}" />
        <ul>
            <li> <input name="kid1" value="${kid1}" /> </li>
            <li> <input name="kid2" value="${kid2}" /> </li>
        </ul>
      </form>
    </li>
</script>
        
<ul id="MyList"></ul>

JavaScript

$(function(){
    
    var items = [{ "Name": 'Barak Obama', 
               "Phone": '555-1212',
               "kid1": "Malia", 
               "kid2": "Sasha"
             },
             { "Name": 'George Bush', 
               "Phone": '444-2222',
               "kid1": "Barbara", 
               "kid2": "Jenna"
             }];
    
    //render the template first
    $("#ListTmpl").tmpl(items).appendTo("#MyList");
    
    //logic to bind the data
    $("#MyList").find('form').each(function(){
        $(this).link(items[$(this).index()]);
    })
    
    if(window.console) console.log(items);
})