JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <p data-bind="visible:ShowPostCode()">
        <label class="field-label" for="postcode">Postcode</label>
        <input id="txtPostCode" data-bind="value:PostCode, valueUpdate: &quot;afterkeydown&quot;" class="field-stretch" type="text">
    </p>
    <p data-bind="visible:ShowDateOfBirth()">
        <label class="field-label" for="dateofbirth">Date of birth</label>
        <input data-bind="value:DateOfBirth, valueUpdate: &quot;afterkeydown&quot;" class="field-stretch" type="text">
    </p>
    <p style="display: none;" data-bind="visible:ShowtelephoneNumber()">
        <label class="field-label" for="telephoneNumber">Telephone number</label>
        <input data-bind="value:DrivingLicenceNumber, valueUpdate: &quot;afterkeydown&quot;" class="field-stretch" type="text">
    </p>
</div>
<button>click</button>

JavaScript

$('button').on('click', function () {
    console.log($('#container input[type="text"]').filter(function () {
        return this.value.length > 0
    }).length);
});