Dynamic Dipslay of Items

Dynamic display of items in its own region and in other regions.

Dynamically Control Item Visibility Across Regions!
An item created in Region 1 can also be displayed in other regions.
Highlighted Items are shared across different region.

When page is initially load, you can see no any region is selected and all four region are seen with their respective items. 

Region 1 has 3 items, 

Region 2 has 6 items, 

Region 3 has 4 items and 

Region 4 has 0 items. 

See the below Pic. 

Pic. 2 Initial of Items under their region

You can set the initial position of items however you want using the built in features of oracle apex like row, column,item type, apearance, size etc. 

Region 1 with a single row having 3 items. 

: Full Name / DOB / Age

Region 2 with  Two row with 3  column items. 

: Address / City / State 

: Country / Occupation / Office Address

Region 1 with a two row having 2 column items 

: Aadhaar No / Pan No 

: Remarks / Created AT 

Region 4 with Zero item, 

$(document).ready(function(){
    $("input[name='P2_RADIO']").change(function(){
        // Get all item containers
        var fullNameItem = $("#P2_FULL_NAME_CONTAINER");
        var dobItem = $("#P2_DOB_CONTAINER");
        var ageItem = $("#P2_AGE_CONTAINER");
       
        var addressItem = $("#P2_ADDRESS_LINE1_CONTAINER");
        var cityItem = $("#P2_CITY_CONTAINER");
        var stateItem = $("#P2_STATE_CONTAINER");
        var countryItem = $("#P2_COUNTRY_CONTAINER");
        var occupationItem = $("#P2_OCCUPATION_CONTAINER");
        var officeAddressItem = $("#P2_OFFICE_ADDRESS_CONTAINER");
       
        var aadhaarItem = $("#P2_AADHAAR_NO_CONTAINER");
        var panItem = $("#P2_PAN_NO_CONTAINER");
        var remarksItem = $("#P2_REMARKS_CONTAINER");
        var createdAtItem = $("#P2_CREATED_AT_CONTAINER");
        var updatedAtItem = $("#P2_UPDATED_AT_CONTAINER");

        if($(this).val() === '1'){
            // Region 1 Layout
           var region1 = $("#Region_1_container");
           
            // Detach all items
            fullNameItem.detach();
            dobItem.detach();
            ageItem.detach();
           
            // Row 1: Full Name, DOB, Age
            var row1 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            fullNameItem.css("width", "33%").css("margin-right", "0.5%");
            dobItem.css("width", "33%").css("margin-right", "0.5%");
            ageItem.css("width", "33%");
            row1.append(fullNameItem).append(dobItem).append(ageItem);
           
            region1.empty().append(row1);
           
        } else if($(this).val() === '2'){
            // Region 2 Layout
            var region2 = $("#Region_2_container");
           
            // Detach all items
            fullNameItem.detach();
            dobItem.detach();
            ageItem.detach();
            addressItem.detach();
            cityItem.detach();
            stateItem.detach();
            countryItem.detach();
            occupationItem.detach();
            officeAddressItem.detach();
           
            // Row 1: Full Name, DOB, Age
            var row1 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            fullNameItem.css("width", "33%").css("margin-right", "0.5%");
            dobItem.css("width", "33%").css("margin-right", "0.5%");
            ageItem.css("width", "33%");
            row1.append(fullNameItem).append(dobItem).append(ageItem);
           
            // Row 2: Address Line 1
            var row2 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            addressItem.css("width", "33%").css("margin-right", "0.5%");
            cityItem.css("width", "33%").css("margin-right", "0.5%");
            stateItem.css("width", "33%");
            row2.append(addressItem).append(cityItem).append(stateItem);
           
           
            // Row 3: Occupation, Office Address
            var row3 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            occupationItem.css("width", "33%").css("margin-right", "0.5%");
            officeAddressItem.css("width", "33%").css("margin-right", "0.5%");
            countryItem.css("width", "33%");
            row3.append(occupationItem).append(officeAddressItem).append(countryItem);

            region2.empty().append(row1, row2, row3);
           
        } else if($(this).val() === '3'){
            // Region 3 Layout
            var region3 = $("#Region_3_container");
           
            // Detach all items
            countryItem.detach();
            occupationItem.detach();
            officeAddressItem.detach();
            aadhaarItem.detach();
            panItem.detach();
            remarksItem.detach();
            createdAtItem.detach();
            updatedAtItem.detach();
           
            // Row 1: Country, Occupation, Office Address
            var row1 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            countryItem.css("width", "33%").css("margin-right", "0.5%");
            occupationItem.css("width", "33%").css("margin-right", "0.5%");
            officeAddressItem.css("width", "33%");
            row1.append(countryItem).append(occupationItem).append(officeAddressItem);
           
            // Row 2: Aadhaar, PAN
            var row2 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            aadhaarItem.css("width", "50%").css("margin-right", "0.5%");
            panItem.css("width", "50%");
            row2.append(aadhaarItem).append(panItem);
           
            // Row 3: Remarks
            var row3 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            remarksItem.css("width", "50%").css("margin-right", "0.5%");
            createdAtItem.css("width", "50%").css("margin-right", "0.5%");
            updatedAtItem.css("width", "50%");
            row3.append(remarksItem).append(createdAtItem).append(updatedAtItem);

             var row5 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            fullNameItem.css("width", "33%").css("margin-right", "0.5%");
            dobItem.css("width", "33%").css("margin-right", "0.5%");
            ageItem.css("width", "33%");
            row5.append(fullNameItem).append(dobItem).append(ageItem);
           
            region3.empty().append(row1, row2, row3, row5);

        }  else if($(this).val() === '4'){
            // Region 4 Layout
           var region4 = $("#Region_4_container");
           
            // Detach all items
            fullNameItem.detach();
            dobItem.detach();
            ageItem.detach();
            occupationItem.detach();
            officeAddressItem.detach();
            countryItem.detach();
           
            // Row 1: Full Name, DOB, Age
            var row1 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            fullNameItem.css("width", "33%").css("margin-right", "0.5%");
            dobItem.css("width", "33%").css("margin-right", "0.5%");
            ageItem.css("width", "33%");
            row1.append(fullNameItem).append(dobItem).append(ageItem);

             var row2 = $("<div class='t-Form-fieldContainer' style='display:flex; width:100%;'></div>");
            occupationItem.css("width", "33%").css("margin-right", "0.5%");
            officeAddressItem.css("width", "33%").css("margin-right", "0.5%");
            countryItem.css("width", "33%");
            row2.append(occupationItem).append(officeAddressItem).append(countryItem);

            region4.empty().append(row1,row2);
        }
    });

    // Initialize on page load
    $("input[name='P2_RADIO']:checked").trigger("change");
});