Shopify Product Page - Selector Code

I am looking for a Shopify expert to help me with editing the selector code for a jewellery product page.

Skills and Experience:
- Strong proficiency in Shopify development
- Experience with editing existing code
- Knowledge of HTML, CSS, Javascript and liquid programming
- Familiarity with Shopify product page customization
- Attention to detail and ability to follow design concepts closely

The ideal candidate will be able to understand and edit the existing code to implement the clear design concept I have in mind for the product page. They should be comfortable working with HTML, CSS, and liquid programming to make the necessary changes. Attention to detail is crucial to ensure that the final product page matches the design concept accurately.

If you have previous experience with Shopify product page customization and are confident in your abilities to edit existing code, please reach out to discuss the project further.

Project Objective:

Shopify Products are using a Product Options App (Live Products) to add options to our ring designs.

I am attempting to create automation with these selectors by comparing the current products metafields with the options available in the options dropdowns and then hiding any options that do not exist in the custom metafields.

I have attempted with the following code:
<div id="band-depths-output"></div>

<script>
window.onload = function() {
// Get the parent div with data-option="Band Depth"
var bandDepthDiv = document.querySelector('div[data-option="Band Depth"]');
var bandDepthOutput = document.querySelector('#band-depths-output');

// Get the metafields values
{% assign bandDepthsMetadata = product.metafields.custom.band_depths | split: ',' %}

// Loop through the choices items and compare their data-value attribute to the metafields values
bandDepthDiv.querySelectorAll('.choices__item').forEach(function(choiceItem) {
var bandDepth = choiceItem.getAttribute('data-value');

// Check if the bandDepth value is in the metafields
{% if bandDepthsMetadata contains bandDepth %}
var paragraph = document.createElement('p');
paragraph.textContent = bandDepth;
bandDepthOutput.appendChild(paragraph);
{% else %}
// Hide the value in the div if it's not in the metafields
choiceItem.style.display = 'none';
{% endif %}
});
};
</script>

But unfortunately, all options are showing as blank..

Solution:

*I am looking for a freelancer to correct this code so that it works or to create new code to achieve the desired result.
*I would ultimately like this in liquid code and JavaScript only.
I will attach the output from the page to test on so there is no need to access shopify page.