Leaflet - Create a circle symbol to use with a GeoJSON layer instead of the default blue marker

leaflet-circle-marker.js

/* 
 * Create a circle symbol to use with a GeoJSON layer instead of the default blue marker
 */

// This will be run when L.geoJSON creates the point layer from the GeoJSON data.
function createCircleMarker( feature, latlng ){
  // Change the values of these options to change the symbol's appearance
  let options = {
    radius: 8,
    fillColor: "lightgreen",
    color: "black",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
  }
  return L.circleMarker( latlng, options );
}

// Use jQuery's getJSON method to fetch the data from a URL
jQuery.getJSON( "http://example.com/layer1.geojson", function( json ) {
  // Use Leaflet's geoJSON method to turn the data into a feature layer
  L.geoJSON( json, {
    pointToLayer: createCircleMarker // Call the function createCircleMarker to create the symbol for this layer
  }).addTo( mymap )
})

I tried it but nothing shows up?

I tried linking my GEOJSON file and the jquery CDN into the HTML but nothing happened also.

it works with this code but unfortunately, I cant style my GEOJSON file and cant create a button to show hide data from.

`
L.geoJSON(data, {
style: function (feature) {
return {color: feature.properties.color};
}
}).bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);

`

thanks work great

any idea how to introduce an option to make some markers be more in the front of the screen and others in the back?
Like a Z-index or something like that.

solved it with pane option:
https://leafletjs.com/reference-1.3.4.html#path
https://leafletjs.com/reference-1.0.0.html#map-overlaypane