Customizer Show/Hide Logo and Site Title

I’ve setup checkbox controls in my theme Customizer to show/hide the Logo and Site Title when they are checked/unchecked. By default, I want the Logo to display and the Site Title to be hidden.

Everything is working as it should except the Site Title won’t display in the live preview when the checkbox is checked, unless settings are saved in the Customizer first. However, the logo does display by default and disappears when unchecked. This leads me to believe there is a problem with the javascript and/or if statement for the Site Title.

This is the code I have in my template file:

<?php if( get_theme_mod( 'display_logo' , '1' ) == '1') { ?>
    <?php if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
        <?php the_custom_logo(); ?>
    <?php else : ?> 
        <h1 class="site-logo"><a href="https://wordpress.stackexchange.com/questions/247411/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>" rel="home" title="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="100" height="50" /></a></h1>
    <?php endif; ?>
<?php } ?>  

<?php if( get_theme_mod( 'display_site_title' , '0' ) == '1') { ?>
    <?php if ( is_front_page() && is_home() ) : ?>
        <h1 class="site-title"><a href="https://wordpress.stackexchange.com/questions/247411/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <?php else : ?>
        <p class="site-title"><a href="https://wordpress.stackexchange.com/questions/247411/<?php echo esc_url( home_url("https://wordpress.stackexchange.com/" ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    <?php endif; ?>
<?php } ?>  

This is the code I have in my customizer.php file:

// Display Logo    
$wp_customize->add_setting( 'display_logo', array(
    'default'           => true,
    'transport'         => 'postMessage'
) );
$wp_customize->add_control( 'display_logo', array(
    'label'             => __( 'Display Logo', 'myTheme' ),
    'type'              => 'checkbox'
) );

// Display Site Title
$wp_customize->add_setting( 'display_site_title', array(
    'default'           => false,
    'transport'         => 'postMessage'
) );
$wp_customize->add_control( 'display_site_title', array(
    'label'             => __( 'Display Site Title', 'myTheme' ),
    'type'              => 'checkbox'
) );

This is the code I have in my corresponding customizer.js file:

// Display Logo     
wp.customize( 'display_logo', function( value ) {
    value.bind( function( to ) {
        if ( true === to ) {
            $( '.site-logo' ).removeClass( 'hidden' );
        } else {
            $( '.site-logo' ).addClass( 'hidden' );
        }
    });
});

// Display Site Title           
wp.customize( 'display_site_title', function( value ) {
    value.bind( function( to ) {
        if ( true === to ) {
            $( '.site-title' ).removeClass( 'hidden' );
        } else {
            $( '.site-title' ).addClass( 'hidden' );
        }
    });
});

Try this function, why going through js when you can just do it with php inside your same file customizer.php

/*
** show site title or hide it
*/

function showtitle_slogan() {
$showttlslogan = get_theme_mod('display_site_title');
    if ($showttlslogan == true) {
        ?>  
        <style type="text/css">
        .site-title { display:none;}
        </style>
    <?php
    }
}
add_action('wp_head', 'showtitle_slogan');

And do the same for everything else.