JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://thetimbanks.com/demos/js/jquery.datalink.js"></script>
<form id="mainForm">
    Title: <input type="text" name="title" />
</form>

<div id="console">
</div>

JavaScript

$(function(){
    var book = {
        title: "My First Title"
    };
    
    $("#mainForm").link(book);
    
    //log out initial book title
    $("#console").append(book.title);
    
    //Update using .data(key, value).  The textbox should read "Test" since I am updating the title property
    $(book).data("title", "Test");
    
    //log out book title after changing via .data(key, value)
    $("#console").append("<br />" + book.title);
    
    //Update using .data(object).  I want to the textbox to read "Test 2" since I am updating the title inside the object
    $(book).data({"title": "Test 2"});
    
    //log out book title after changing via .data(object)
    $("#console").append("<br />" + book.title);
    
    //As you can see the "title" attribute gets changed but the textbox is not updated to reflect the change
});