Need help Changing source of image that contains PHP with jQuery/javascript

I want to be able to change the source of a particular image when that image is clicked. The only problem is the source contains PHP so when I try to change the source jquery is freaking out.

To be more specific I want the image source to change from this:
<img id="sliderjoint" src="<?php echo esc_url( get_theme_mod('selectimage'));?>" alt="">

To this:
<img id="sliderjoint" src="<?php echo esc_url( get_theme_mod('selectimage2'));?>" alt="">

Notice the slight change- I want ‘selectimage2’ to replace ‘selectimage’.

I believe the problem is that the source contains PHP so jQuery doesnt like that. All of my markup turns into random characters when I try to run this.

Here is the Javascipt/Jquery that I placed in my separate javascript file (the alert box is just so I can make sure the change is being made):

( function( $ ) {
  $( document ).ready( function() {

	$('#slide-holder').on('click',
		function(){
			$('#sliderjoint').attr('src', '<?php echo esc_url( get_theme_mod(\'selectimage2\'));?>');

			alert( document.getElementById('sliderjoint').src );

		});
	});
})(jQuery);

The source is in fact changing, but it is not what it should be because the
less than, greater than and a few other symbols turn into random symbols and numbers.

I have enqueued the script like this:

function sumcakes_scripts() {

	wp_register_script('extrajs', get_template_directory_uri() . "/js/extra.js", array('jquery'));
	wp_enqueue_script('extrajs');

	}

add_action('wp_enqueue_scripts', 'sumcakes_scripts');

any advice greatly appreciated.