jquery command is executed irregularly

I have just written my first jQuery code and it works partially. Completely it works only on the second click. My goal is that when you click on the filter digital, the thumbnail to digital is displayed. This thumbnail has the class ".digital" and for print the class ".print". The filters have the same name as ID.

I have written the following code for this:

<script>
$('.project-thumbnail').hide();
</script>

<script>
    $('#digital').click(function(){
          $('.project-thumbnail').hide();
          $('.digital').show();
        });
        
        $('#print').click(function(){
          $('.project-thumbnail').hide();
          $('.print').show();
        });
        
        $('#branding').click(function(){
          $('.project-thumbnail').hide();
        });
<script>

And this is the test page: Link

Can you please help me?