wccpf_init_color_pickers() function error

(index):226 Uncaught TypeError: $ is not a function
    at wccpf_init_color_pickers ((index):226)
    at HTMLDocument.<anonymous> ((index):232)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

<script type="text/javascript">
				var $ = jQuery;
				function wccpf_init_color_pickers() {					
											
				<strong>ERROR HERE</strong> $( ".wccpf-color-fabric_color").spectrum({
						 color: "#ffffff", 
						 preferredFormat: "hex",					
						showPaletteOnly: true,showPalette: true,palette : [['#E31836','#2383AB','#FFB328'],['#563757','#948B7C','#FFFFFF']]					});		
				}				
			$(document).ready(function() {			
				wccpf_init_color_pickers();
			});
		</script>	

Issue is occurring in the form of a color picker displaying as a text field with hex codes.

The page I need help with: [log in to see the link]