JSFiddle - React, Tailwind, and code Playground

HTML

<form id="search" action="" name="search">
    <select name="departments" id="departments">
        <option>Select</option>
    </select>
    
    <select name="subject" id="subject">
        <option>Select</option>
    </select>
    
    <select name="services" id="services">
        <option>Select</option>
    </select>
    
</form>

JavaScript

(function($) {


    var data = [
        {
        "department": "IT",
        "subject": [
            {
            "title": "Programmer",
            "services": [
                {
                "name": "example1"},
            {
                "name": "example2"}
                          ]

            },
        {
            "title": "Solutions Architect",
         "services": [
                {
                "name": "example3"},
            {
                "name": "example4"}
                          ]
},
        {
            "title": "Database Developer"}
        ]},
    {
        "department": "Accounting",
        "subject": [
            {
            "title": "Accountant"},
        {
            "title": "Payroll Officer"},
        {
            "title": "Accounts Clerk"},
        {
            "title": "Analyst"},
        {
            "title": "Financial Controller"}
        ]},
    {
        "department": "HR",
        "subject": [
            {
            "title": "Recruitment Consultant"},
        {
            "title": "Change Management"},
        {
            "title": "Industrial Relations"}
        ]},
    {
        "department": "Marketing",
        "subject": [
            {
            "title": "Market Researcher"},
        {
            "title": "Marketing Manager"},
        {
            "title": "Marketing Co-ordinator"}
        ]}
    ]
    var selectedDepartment, selectedSubject;

    $.fn.changeType = function() {

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i, d) {
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments").change(function() {
            var index = $(this).get(0).selectedIndex;

            var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
            selectedDepartment =...