JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<script src="https://lodash.com/vendor/cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

JavaScript

const jsonData = {
  "asset": {
    "type": "proFieldCollection",
    "id": "US-201-10-section",
    "metaData": {
      "role": "section"
    },
    "values": [{
      "asset": {
        "type": "proChoice",
        "id": "US-201-11-264",
        "label": {
          "asset": {
            "type": "proText",
            "id": "US-201-11-264-label",
            "value": "Filing Status"
          }
        },
        "binding": "ind.detail.s1.general.c1000100036.x[0].amt",
        "modifiers": [{
          "type": "tag",
          "value": "compact"
        }, {
          "type": "input",
          "value": "default"
        }],
        "externalData": "local.tables.table--135"
      }
    }, {
      "asset": {
        "type": "proMultiSelect",
        "id": "US-201-12-MultiSelect",
        "applicability": "{{ind.detail.s1.general.c1000100036.x[0].amt}} == '209'",
        "choices": [{
          "id": "US-201-12-choices",
          "label": {
            "asset": {
              "type": "proText",
              "id": "US-201-12-choices-label",
              "value": "MFJ vs MFS Comparison"
            }
          },
          "value": "1",
          "binding": "ind.detail.s1.general.c1000100035.x[0].amt"
        }]
      }
    }, {
      "asset": {
        "type": "proMultiSelect",
        "id": "US-201-13-MultiSelect",
        "applicability": "!({{ind.detail.s1.general.c1000100036.x[0].amt}} == '1' || {{ind.detail.s1.general.c1000100036.x[0].amt}} == '4' || {{ind.detail.s1.general.c1000100036.x[0].amt}} == '5')",
        "choices": [{
          "id": "US-201-13-choices",
          "label": {
            "asset": {
              "type": "proText",
              "id": "US-201-13-choices-label",
              "value": "Live With Spouse?"
            }
          },
          "value": "1",
          "binding": "ind.detail.s1.general.c1000100026.x[0].amt"
        }]
      }
    }, {
      "asset": {
        "type": "proMultiSelect",
        "id":...