Update Global Array after Onclick

var managers = [
                    'data-entry-operator', 'manager', 'technician-electrical', 'technician-mechanical', 
                    'composite-worker','post-manager', 'border-guard-captain', 'HQ',
                    'Director', 'Admin-Manager', 'MOI', 'Luerssen', 'Presentation', 'admin', 
                    'Region-Manger', 'Maintainace', 'Border-Guard-Manager'
                ]

var roles = [
    {
        Role_Name: 'manager',
        Reporting_Manager: 'MOI',
        Region_Permissions: 'Saudi',
    },
    {
        Role_Name: 'data-entry-operator',
        Reporting_Manager: 'admin',
        Region_Permissions: 'UAE',
    },
    {
        Role_Name: 'technician-electrical',
        Reporting_Manager: 'Director',
        Region_Permissions: 'Saudi',
    },
    {
        Role_Name: 'technician-mechanical',
        Reporting_Manager: 'Director',
        Region_Permissions: 'Jeddah',
    },
    {
        Role_Name: 'composite-worker',
        Reporting_Manager: 'admin',
        Region_Permissions: 'India',
    },
];


let regions = ['Saudi', 'UAE' , 'Jeddah', 'India']


var target1 = document.getElementById('select1')
var target2 = document.getElementById('select2')
var target3 = document.getElementById('select3')
var target4 = document.getElementById('tbody')
var target5 = document.getElementById('select4')
var target6 = document.getElementById('select5')


var template = "<option value=\"~id~\">~id~</option>"
var tableTemplate = "<tr><th scope=\"row\">~rNum~</th><td id=\"~rName~\">~rName~</td><td>~rManager~</td><td>~rRegion~</td></tr>"

roles.forEach(function(item,index){
    target4.insertAdjacentHTML('beforeend', tableTemplate.replace(/~rNum~/g, index+1).replace(/~rName~/g, item.Role_Name).replace(/~rRegion~/g, item.Region_Permissions).replace(/~rManager~/g, item.Reporting_Manager));
})

managers.forEach(function(item) {
  target1.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
});

regions.forEach(function(item) {
    target2.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
  });

  managers.forEach(function(item) {
    target5.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
  });
  
  regions.forEach(function(item) {
      target6.insertAdjacentHTML("beforeend", template.replace(/~id~/g, item));
    });

managers.forEach(function(item){
    target3.insertAdjacentHTML("beforeend",template.replace(/~id~/g, item))
})

var conceptName, reportManager;
$(document).ready(function(){
    $(document).on('change','#select3' ,function change(){
        $('.checkData').removeClass('active');
        $('.third').fadeOut();
        $('.third').fadeIn(); 
        conceptName = $('#select3').find(":selected").text();
        $('.third').addClass('active');
        $('.third').removeAttr('style');
        $('#exampleDataList').val(conceptName);
        reportManager = roles.find(role => role.Role_Name === conceptName);
        $("#select1").val(reportManager.Reporting_Manager)
        $('#select2').val(reportManager.Region_Permissions)
        var newData;
        $('#savebtn').click(function result(){
                const rName = $('#exampleDataList').val();
                const rManager = $('#select1').find(":selected").text();
                const rPermission = $('#select2').find(":selected").text();
                reportManager.Role_Name = rName;
                reportManager.Reporting_Manager = rManager;
                reportManager.Region_Permissions = rPermission;
                newData = reportManager;
                changeData();

                $('.third').removeClass('active');
                if(!$('.checkData').hasClass('active')){
                    $('.checkData').addClass('active');
                }
            }
        );
        function changeData(){
            roles.map(role => {
                if(role.Role_Name === conceptName){
                    role.Role_Name = newData.Role_Name;
                    role.Region_Permissions = newData.Region_Permissions;
                    role.Reporting_Manager = newData.Reporting_Manager;
                    $(`#select1 option[value=${role.Reporting_Manager}]`).text(newData.Reporting_Manager);
                    $(`#select2 option[value=${role.Region_Permissions}]`).text(newData.Region_Permissions);
                }   
            })
            managers.forEach(function(elem,index){
                if(conceptName == elem){
                    managers[index] = newData.Role_Name;
                    $(`#select3 option[value=${conceptName}]`).text(newData.Role_Name);
                }
            })
        }

        $('#dataClose').click(function(){
            $('.third').removeClass('active');
            if(!$('.checkData').hasClass('active')){
                $('.checkData').addClass('active');
            }
        })
    })
})

const update = function(newN,newMa,newReg){
    roles.push({Role_Name: newN,Reporting_Manager: newMa,Region_Permissions:newReg}) ; 
}

let newRole,newRegion,newManager, newArr;
$(document).ready(function(){
    $('#addRole').click(function(){
        newRole= $('#newRoleName').val();
        newManager = $('#select4').find(":selected").val();
        newRegion = $('#select5').find(":selected").text(); 
        update(newRole,newManager,newRegion);
    })
})