nhance-enrollment/app/Views/client_rm.php

<div class="tab-pane fade" id="RM-tab">
    <div class="row">
        <div class="col-12">
            <div class="card-body">

                <div class="row float-right" style="position: relative; bottom: 20px; right:13px;">
                        <button class="btn btn-primary btn-sm" id="client_rm_edit" ><span id="rm_icons" class="mdi mdi-lead-pencil"></span> Edit</button>                
                </div>
                
                <hr>

                <form role="form" class="parsley-examples" method="post" id="relation_form" enctype="multipart/form-data">
                    <input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
                    <input type="hidden" name="PrimaryKey" id="relation_PrimaryKey" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
                    <input type="hidden" name="client_id" id="client_id_relation" value="<?= isset($client['id']) ? $client['id'] : '' ?>"/>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label for="emp_code">Account Manager ( L1 )</label>
                                <select class="form-control" id="account_manager" name="account_manager[]" multiple>
                                    <?php foreach($RM as $value) { ?>
                                        <?php if($value['role'] === '3') { ?>
                                            <option value="<?= $value['id'] ?>"><?= $value['first_name'] ?></option>
                                        <?php } ?>                                    
                                    <?php } ?>  
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="profile">Manager ( L2 )</label>
                                <select class="form-control" id="manager" name="manager">user_id
                                    <option value="">Select Manager</option>
                                    <?php foreach($RM as $value) { ?>
                                        <?php if($value['role'] === '2') { ?>
                                            <option value="<?= $value['id'] ?>"><?= $value['first_name'] ?></option>
                                        <?php } ?>                                    
                                    <?php } ?>  
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="profile">Head</label>
                                <select class="form-control" id="head" name="head">
                                    <option value="">Select Head</option>
                                    <?php foreach($RM as $value) { ?>
                                        <?php if($value['role'] === '5') { ?>
                                            <option value="<?= $value['id'] ?>"><?= $value['first_name'] ?></option>
                                        <?php } ?>
                                    <?php } ?>  
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="form-group text-right m-b-0">
                        <button type="submit" class="btn btn-primary waves-effect waves-light mr-1" id="client_rm_btnSubmit">Submit</button>
                    </div>
                </form>
            </div>
        </div> <!-- end col-->
    </div>
    <!-- end row -->
</div>
<!-- end -->

<script>

var relation_PrimaryKey = $('#relation_PrimaryKey').val();

$(document).ready(function(){
        
    relation_PrimaryKey = $('#relation_PrimaryKey').val()

    $('#client_rm_edit').hide()

    $('#account_manager').multiselect({
        nonSelectedText: 'Select Account Manager',
        enableFiltering: false,
        enableCaseInsensitiveFiltering: false,
        includeSelectAllOption : false,
        buttonWidth:'100%'
    });


    var data = <?= isset($client_relation) ? json_encode($client_relation) : '[]' ?>;
    if (relation_PrimaryKey !== '') {
        console.log('test case k212')
        $('#client_rm_edit').show()
        $('#client_rm_btnSubmit').hide();
        $.each(data, function(index, item) {
            $('#head option[value="' + item.user_id + '"]').prop('selected', true);
            $('#manager option[value="' + item.user_id + '"]').prop('selected', true);
            var $option = $('#account_manager option[value="' + item.user_id + '"]');
                if ($option.length > 0) {
                    $option.prop('selected', true);
                }
        });

        $('#account_manager').multiselect('refresh');
        $('#head').prop('disabled', true);
        $('#manager').prop('disabled', true);
        $('#account_manager').multiselect('disable');

    }


    //for Client RelationShip Manager Form Submit using AJAX
    $("#relation_form").submit(function(event) {

            event.preventDefault(); 
            relation_PrimaryKey = $('#relation_PrimaryKey').val()
            
            var isValid = true;
            var form_action = '';

            if (relation_PrimaryKey === '') {
                toastr.error('Client is required', 'Error');
                return; 
            }

            if (isValid) {

                $('.loader').fadeIn();
                $('.loader-mask').fadeIn();

                if(relation_PrimaryKey === ''){
                    form_action = '<?= base_url("client/relation/create"); ?>';
                }else{
                    form_action = '<?= base_url("client/relation/edit"); ?>';
                }

                var formData = new FormData($('#relation_form')[0]);

                $.ajax({
                    data: formData,
                    url: form_action,
                    type: "POST",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        console.log(res);

                        if(res){
                            setTimeout(function() {
                                
                                $('.loader').fadeOut();
                                $('.loader-mask').delay(350).fadeOut('slow');
                                var message = (relation_PrimaryKey === '') ? 'Client Relation Created successfully' : 'Client Relation Updated successfully';
                                toastr.success(message, 'Success');
                                $('#branch_tab').click();                     
                            }, 1000);
                        }

                    },
                    error: function(xhr, status, error) {
                        console.error(xhr.responseText);
                        console.error(status, error);
                        setTimeout(function() {
                            $('.loader').fadeOut();
                            $('.loader-mask').delay(350).fadeOut('slow');
                     console.log('Something Wrong!', 'warning');                        }, 1000);
                    }
                });

            }
    });

    $('#client_rm_edit').click(function(){

        var isDisabled = $('#head').prop('disabled');
        console.log(isDisabled)
        $('#head').prop('disabled', !isDisabled);
        $('#manager').prop('disabled', !isDisabled);

        if (isDisabled) {
            $('#account_manager').multiselect('enable');
            $('#client_rm_btnSubmit').show();
            $(this).html('<span id="rm_icons" class="fa fa-times-circle"></span> Close Edit '); 
        } else {
            $('#account_manager').multiselect('disable');
            $('#client_rm_btnSubmit').hide();
            $(this).html('<span id="rm_icons" class="mdi mdi-lead-pencil"></span> Edit '); 
        }
    });


});
</script>