Show / hide fields based on field value

show-hide-fields.js

var required_financial_fields = {{LOAN_REQUIRED_FINANCIAL_FIELDS|safe}};
var fields = []

for(var key in required_financial_fields) {
    fields = fields.concat(required_financial_fields[key])
}

function hideAllFields() {
    for(var i = 0; i < fields.length; i++) {
        document.querySelector('[name='+fields[i]+']').parentNode.parentNode.style.display = "none";
    }
}

function showFields(key) {
    hideAllFields()
    for(var i = 0; i < required_financial_fields[key].length; i++) {
        document.querySelector('[name='+required_financial_fields[key][i]+']').parentNode.parentNode.style.display = "block";
    }
}

var category = document.getElementById('id_category');
showFields(category.value)
category.addEventListener('change', function() {
    showFields(this.value)
})