JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<div id="foo">
    
</div>

<div id="moo" style="display: none;">
<div id="addressVerification" class="row addrVerification container_fluid isActive">
    <h1>Verify Address</h1>
    <hr>
    <p><strong>We're sorry, we were unable to find an exact match for the address you entered.</strong></p>

    <p>Please review the address carefully and click "Edit This Address" to make corrections, or click "Use As Entered" if the address is correct.</p>
    
    <div class="row">
        {{#with current}}
        <div id="enteredRow" class="span-6 mi-whole">
            <div id="enteredBlock">
                <h4>You entered:</h4>
                <span class="verifyAddress1">{{address1}}</span>
                <span class="verifyAddress2">{{address2}}</span>
                {{#if address3}}
                <span class="verifyAddress3">{{address3}}</span>
                {{/if}}
                {{#if orgName}}
                <span class="verifyAddress3">{{orgName}}</span>
                {{/if}}
                <span class="verifyCity">{{city}}</span><span>, </span>
                <span class="verifyState">{{state}}</span><span> </span>
                <span class="verifyZip">{{zipCode}}</span>
            </div>
             <a id="editAddress" class="editAV" href="#" title="Edit this address">Edit this address</a>
        </div>
        {{/with}}

        {{#with suggested}}
        <div id="suggestedRow" class="span-6 mi-whole">
            <div id="suggestedBlock">
                <h4>We found:</h4>
                <span class="verifyAddress1">{{address1}}</span>
                <span class="verifyAddress2">{{address2}}</span>
                {{#if address3}}
                <span class="verifyAddress3">{{address3}}</span>
                {{/if}}
                {{#if orgName}}
                <span class="verifyAddress3">{{orgName}}</span>
                {{/if}}
              ...

JavaScript

var moo = Handlebars.compile($('#moo').html());

var data = {
    suggested: {
        address1: "15 Casco St",
        address2: "",
        city: "Freeport",
        state: "ME",
        zipCode: "04033-0002",
        country: "USA"
    },
    current: {
        address1: "15 Casco St",
        address2: "",
        city: "Brunswick",
        state: "ME",
        zipCode: "04011",
        country: "USA"
    },
    needHelp: true
    
};

// delete data.suggested;

$('#foo').html(moo(data));