JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<h5 class="book-nav-title"></h5>
<ul id="navBookItems" class="nav nav-stacked book-nav" data-bind="foreach: topics">
    <li data-bind="linkMe: $data"></li>
</ul>

JavaScript

ko.bindingHandlers.linkMe = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        var link = value.link.replace(value.originalText, '<i class="pull-right"></i>'+ value.translation);
        $(element).html(link)
    }
}

ko.applyBindings({
    topics : [
        {
            link: "<a href='/bookHistory.html'>History101</a>",
            originalText: "History101",
            section: "First",
            translation: "History101"
        },
        {
            link: "<a href='/bookHistory.html' >History101</a>",
            originalText: "History101",
            section: "First",
            translation: "History101"
        },
    ]
});