Setting subgrid visibility based on value in another subgrid.

Within a contact form I have inserted a subgrid of "Job Titles" (Contact can have multiple job titles) I then wish to see clients of the contact dependent on their job title, so I have inserted subgrids of job title clients.

e.g. A contact is selected as a "Contractor" and "Agronomist" in the "Job Title" subgrid. On the contact form are displayed the contacts "Contracting Clients" in one subgrid and the contacts "Agronomy Clients" in another.

I do not want the all the job title subgrids to be displayed on the form when not needed, only when the relevant job titles are selected in the "Job Titles" subgrid

I am very new to JavaScript and I am having trouble writing the correct code to work on an OnLoad event.

This is what I have so far for the visiblity rule for the "Contracting Clients" subgrid:

function HideCont_Clients() {

    var firstEntityPrimaryAttributeValue = Xrm.Page.getControl("Job_Title").getGrid().getRows().get(0).getData().getEn;

    if (firstEntityPrimaryAttributeValue === "Contractor") {

Xrm.Page.getControl("Cont_Clients").setVisible(true);

    } else {

Xrm.Page.getControl("Cont_Clients").setVisible(false);

    }
}

Thank you for your time and help.