Javascript pre selected select option not showing hidden value

I have this javascript and data get from database. The problem is, the hidden value is not showing when select option is already got its value from database. I have to play around the option then the hidden value is showing. How to show the hidden value if its pre selected from the select option?

<?php 
include('../includes/dbconnection.php');
?>
<html>
<head>
<script language="javascript">
function show(select){
       if(select.value=='YA'){
        document.getElementById('hidden').style.display = "inline-block";;
       } else{
        document.getElementById('hidden').style.display = "none";
       }
    }
</script>
</head>
<body>
<div class="form-group">
<?php
$sql_update = mysqli_query($con,"Select * FROM abms_dkk AS dkk Where dkk.id = '30'");
while($row=mysqli_fetch_array($sql_update)){
$option = $row['tick']; 
?>  
<label style="font-size: 13px;"> Select answer</label><br>
<select name="tick" class="form-control" onchange="show(this)">
<option value="YA" <?php if($option=="YA") echo 'selected="selected"'; ?> >YA</option>
<option value="TIADA" <?php if($option=="TIADA") echo 'selected="selected"'; ?> >TIADA</option>
</select>
<br>
<?php } ?>
</div>      
<a id="hidden" style="display:none;"  href="add_comp.php" class="btn btn-success">Add</a>                               
</body>
</html>

Answer

I think I might be tempted to do something like this:

<?php 
    include('../includes/dbconnection.php');
?>
<html>
    <head>
        <script>
            /*
                Register an external event handler - the js code can then be included
                in a separate file if needed - from a cdn perhaps.
                
            */
            document.addEventListener('DOMContentLoaded',function(){
                const oSelect=document.querySelector('select[name="tick"]');
                const oHref=document.querySelector('a[id="hidden"]');
                
                const show=function(e){
                    oHref.style.display=e.target.value=='YA' ? 'inline-block' : 'none';
                };
                
                //register `onchange` event handler
                oSelect.addEventListener('change',show);
                
                // show or hide hidden element immediately on load
                oHref.style.display=oSelect.value=='YA' ? 'inline-block' : 'none';
            });
        </script>
        <!--
            Rather than inline styles it is generally preferred to
            use CSS...
        -->
        <style>
            #hidden{display:none;}
            .form-group label{font-size: 13px;}
        </style>
    </head>
    <body>
        <div class='form-group'>
            <label>Select answer</label>
            <br />
            <select name='tick' class='form-control'>
            <?php
                /*
                    Just to clean up the code use PHP to generate the options
                    rather than the inline echo statements used before.
                */
                $sql = mysqli_query( $con, 'select * from `abms_dkk` where `id` = 30' );
                
                while( $row=mysqli_fetch_array( $sql ) ){
                    $option = $row['tick'];
                    
                    printf('
                        <option value="YA"%s>YA
                        <option value="TIADA"%s>TIADA',
                        
                        $option=='YA' ? ' selected' : '',
                        $option=='TIADA' ? ' selected' : ''
                    );
                }
            ?>
            </select>
            <br />
        </div>
        <a id='hidden' href='add_comp.php' class='btn btn-success'>Add</a>
    </body>
</html>