Generating JS/jQ code for a Wordpress Installation with FacetWP Plugin

I am looking for a skilled developer to generate JS/jQ code for a Wordpress installation with the FacetWP plugin. The specific functionality I need the code to generate is filtering/searching content.

Abstract: JS/jQ doesn’t execute in the filtered Listing content that’s returned from a FacetWP Map Facet. We need a solution to this that is compliant with Wordpress best practices, keeps our page speed low, is reliable and doesn’t create any vulnerabilities, and offers the same functionality that the listings show before they are filtered.

Platform: Wordpress
Plugins: FacetWP, Elementor, CPT-UI, Advanced Custom Fields

Desired behavior: We are currently using FacetWP Maps to filter yard ramp rentals by location. When you focus the map on a specific location, the listings below the map update to show only the listings in that area. Each listing contains a jQ accordion under “Specs,” which hides/shows certain specifications for each ramp, and some additional javascript that triggers the page to scroll to the top when a button is clicked.

Current Issue: After the user filters the listings based on the map, the jQ/JS in the filtered listings (the section below the map) doesn’t execute. The accordion displays flat, and the “See on Map” button no longer scrolls (though, the map does focus properly). I originally had built the listing template in elementor, where this general layout/functionality works just fine, but it takes 5-10x as long to load as a simple php template.

The provided solution should be in line with established Wordpress best practices. Admin credentials for a staging site will be provided, as well as access to SFTP if needed.

Listing code:
This template is included directly into the FacetWP listing template in admin, using the standard WP method: <?php include( get_stylesheet_directory() . '/yrr_listing.php' ); ?>, per FacetWP recommendations.

The yard-ramps page itself was built in Elementor as a custom post type archive, using the listing widget and map widget provided by FacetWP.

<!-- I had this in the loop at one point. It didn't work, so I put it a bunch of other places, including in an enqueued doc. None of that worked, so it lives here for now. I am awful with JS, which is why I need help. -->
<script>
//jquery-ui-accordion
jQuery(document).ready(function ($) {
$(".accordion").accordion({
collapsible: true,
active: false,
heightStyle: "content",
header: ".title"
});


//scroll up to the top of the page when someone clicks "See on Map" button. I have no idea why FWP doesn't do this in the first place, but it's very irritating that they dont.
$(".yrr_map_focus").click(function () {
$('html, body').animate({
scrollTop: $("#facetwp-map").offset().top - 50
}, 500);
});
});
</script>




<?php
//standard enqueue stuff. Just styles and the accordion that ships with WP.
wp_enqueue_style('yrr_listing', get_stylesheet_directory_uri() . '/css/yrr_listing.css');
wp_enqueue_script('jquery-ui-accordion');
//Accordion stylesheet, which is a pared down themeroller theme, because I'm lazy. Why did I register this but not the previous? No idea.
wp_register_style('yrr_listing_theme', get_stylesheet_directory_uri() . '/inc/yrr_listing/jquery-ui.css', array(), '1', 'screen');
wp_enqueue_style('yrr_listing_theme');




if (have_posts()): ?>
<?php while (have_posts()):
the_post();
?>


<div class="yrr_listing">
<div class="yrr_listing_title">
<h1><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h1>
</div>
<div class="yrr_listing_img">
<?php the_post_thumbnail('medium_large'); ?>
</div>
<div class="yrr_listing_spec">
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Availability:</h5>
</div>
<div class="yrr_spec-value">
<?php
$status = get_field('yrr_status');
echo $status['label']; ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Location:</h5>
</div>
<div class="yrr_spec-value">
<?php
$location = get_field('yrr_location');
echo $location['address']; ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Price:</h5>
</div>
<div class="yrr_spec-value">
<?php the_field('yrr_price'); ?>
</div>
</div>
<!--start accordion-->
<div class="accordion ">
<div class="yrr_spec-toggle title">
<div class="yrr_spec-key">
<h5>Specs</h5>
</div>
</div>
<!--the dropdown -->
<div class="content ">
<div class=" yrr_spec-row">
<div class="yrr_spec-key">
<h5>GVWR:<h5>
</div>
<div class="yrr_spec-value">
<?php the_field('yrr_gvwr'); ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Length:</h5>
</div>
<div class="yrr_spec-value">
<?php the_field('yrr_length'); ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Width:</h5>
</div>
<div class="yrr-spec-value">
<?php the_field('yrr_width'); ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Weight:</h5>
</div>
<div class="yrr-spec-value">
<?php the_field('yrr_weight'); ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Service Height:</h5>
</div>
<div class="yrr-spec-value">
<?php the_field('yrr_svc-range'); ?>
</div>
</div>
<div class="yrr_spec-row">
<div class="yrr_spec-key">
<h5>Level Off:</h5>
</div>
<div class="yrr-spec-value">
<?php if (the_field('yrr_level-off ') == '') {
echo 'N/A';
} else {
the_field('yrr_level-off');
}
; ?>
</div>
</div>
</div>
<!--end dropdown -->
</div>
<!--end accordion-->
<div class="yrr_buttons">
<div class="yrr_map_focus yrr_button">
<a class="" href="#yrr_map" id="<?php echo get_the_id(); ?>">
<!-- I have no idea why I kept the elementor style in here. Probably just haven't been bothered to add the styling to the stylesheet enqueued above. Because, again, I am lazy.-->
<span class="elementor-button-text">See on Map</span>
</a>
</div>
<div class="yrr_button">
<a class="" href="<?php the_permalink(); ?>">
<span class="elementor-button-text">Rent this Ramp</span>
</a>
</div>
</div>
</div>
</div>








<?php endwhile; ?>
<?php else: ?>
<p>
<?php _e('Sorry, no posts matched your criteria.'); ?>
</p>
<?php endif; ?>