JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>


 <input type="checkbox"  class="checkAll" name="printDetails" value="Print" data-bind="checked: allSelected,click: selectAll">Select All
 
<a href="tru.aspx?patient=" onclick="ReadChkList()" id="printMultiple">print multiple</a>

<div data-bind="foreach:SubscriberList">
<dt><a href="" data-bind="text: FirstName"></a></dt>
<dd>
    <div data-bind="attr:{class: 'tableComponent idx'+Index}">
  <div class="tableComponentHeader">
     <div><input type="checkbox" data-bind=" checked: allSelectedBySubscriber,click: selectBySubscriber" />toto</div>
    <div class="cell span1">&nbsp;</div>
    <div class="cell  span3">Patient Name</div>
    <div class="cell  span2">Relationship to Subscriber</div>
    <div class="cell  span2">Employer Group</div>
    <div class="cell  span4">&nbsp;</div>
  </div>

  <div class="row" data-bind="foreach:MemberList">
    <div class="cell span1"><input type="checkbox" class="chkBenefit"  data-bind="attr:{param:QueryParameter},  checked: selectedMember,click: selectMember"></div>
    <div class="cell  span3" data-bind="text: FirstName"></div>
    <div class="cell  span2" data-bind="text: Relation"></div>
    <div class="cell  span2" data-bind="text: EmployerGroup"></div>
    <a class="cell  span4" data-bind="attr: { href: $root.Message + QueryParameter }">porint</a>
  </div>
</div>
</dd>
</div>

JavaScript

//HERE is my JSON GET to return JSON object. I Want to populate a form and then print it to PDF. I have hardcoded the values in knockout but want to find a way to use the JSON Object and knockout data binding to populate my form. 


//var HeroDetails = $.get("GetHeroDetailsForVillianView", {
                    //HeroRequestIdForvillianDetailsView: HeroRequestIdForVillianDetailsView
                //}, function (returnDataForDetails) {
                  //  var results = JSON.parse(returnDataForDetails);

    
    function ReadChkList(){
    	 var url = "tru.aspx?patient=";
       jQuery("input.chkBenefit").each(function(){
                if ($(this).prop("checked")){
                	url+=$(this).attr("param")+",";
                }
            });
       //window.open(url,'_blank');
       console.log(url);
    }

$(document).ready(function(){ 
    
     var jSonUIModel = {"Message":"printttnttntntntntn","SubscriberList":[{"Message":null,"FirstName":"qweaaaa","LastName":"dddd","ExternalMemberId":"1111111","SubscriberRelationTable":[{"isSelected":"true","FirstName":"qwe","Relation":"Self/Subscriber","EmployerGroup":"xzc - 5576","QueryParameter":"2000071,517729538,4407","CPBDetailPage":"qqqq.aspx"},{"isSelected":"true","FirstName":"asd","Relation":"Spouse","EmployerGroup":"asd - asd","QueryParameter":"asd,asd,517729538,4407","CPBDetailPage":"asd.aspx"},{"isSelected":"true","FirstName":"asd","Relation":"Dependent","EmployerGroup":"asdas - asdasdOT)","QueryParameter":"2000071,2006456,517729538,4407","CPBDetailPage":"asd.aspx"}]},{"Message":"No information for hkjkhj ID # asd asd asd DOB 02/28/asd. ","FirstName":"asd","LastName":"asd","ExternalMemberId":"7879","SubscriberRelationTable":[]},{"Message":null,"FirstName":"asd","LastName":"asd","ExternalMemberId":"65655656","SubscriberRelationTable":[{"isSelected":"true","FirstName":"asd","Relation":"Self/Subscriber","EmployerGroup":"asd - asd...