Jquery to make the if statement according the condition

I have a problem to combine if else function in jquery, it cannot show me correct to choose the condition.

Below is my coding:

<script>
$(document).ready(function(){
    $('#parentid').change(function(){
         if ( $(this).val() == '0' ){
            $('#activity_code, #activity_name,#sub_activity_code,#sub_activity_name,#transaction_code,#transaction_name').attr('readonly', 'readonly');
        }else{
            $('#activity_code, #activity_name').removeAttr('readonly');
        }
        if ( $(this).val() == '1' ){
            $('#function_code, #function_name,#sub_activity_code,#sub_activity_name,#transaction_code,#transaction_name').attr('readonly', 'readonly');
        }else{
            $('#activity_code, #activity_name').removeAttr('readonly');
        }

        if ( $(this).val() == '2' ){
            $('#function_code, #function_name,#activity_code, #activity_name,#transaction_code,#transaction_name').attr('readonly', 'readonly');
        }else{
            $('#sub_activity_code, #sub_activity_name').removeAttr('readonly');
        }

        if ( $(this).val() == '3' ){
            $('#function_code, #function_name,#activity_code, #activity_name,#sub_activity_code, #sub_activity_name').attr('readonly', 'readonly');
        }else{
            $('#transaction_code,#transaction_name').removeAttr('readonly');
        }

        if ( $(this).val() == '4' ){
            $('#function_code, #function_name,#activity_code, #activity_name,#sub_activity_code, #sub_activity_name,#transaction_code,#transaction_name,#category,#request_by').attr('readonly', 'readonly');
        }

    });
});
</script>

Actually I want the output show in the below, i want the output show correct what I choose the category number, below the picture will get more clear description,hope someone can guide me how to solve these problem:

This is my html code: https://pastebin.com/N1kqzf8g