How to display metaobject fields dependent on current product being viewed?

[cesarcor]

Hello everyone, hopefully, I could get some help on this one.

I have developed a custom table section in liquid to be used on product templates. To manage data in the table I'm using a metaobject called comparison_table_features, the idea is that each metaobject entry represents a row in the table. I have created a metafield so that the metaobject in question is present when editing product content in backend.

The problem with my code implementation below is that all of the entries show no matter what. Let's say I have Product A and Product B, no matter if I'm looking at Product A or Product B, both of the metaobject entries filled in these two products are showing on the product template.

How can I only display metaobject entries from Product A if I'm looking at Product A in the product template? and vice versa, how can I only display metaobject entries from Product B if I'm looking at Product B etc. in the product template? and not have all of the entries displayed on all of the products.

Hopefully this makes sense, any help would be highly appreciated.

Liquid code:

    {% assign comparison_table_features = shop.metaobjects.comparison_table_features.values %}

    {% for key in comparison_table_features %}
      {% assign feature = key.feature.value %}
      {% assign current_product_feature = key.current_product_feature.value %}
      {% assign product_1_feature = key.product_1_feature.value %}
      {% assign product_2_feature = key.product_2_feature.value %}

        <tr>
          <td>{{ feature.children[0].children[0].value }}</td>
          <td>{{ current_product_feature.children[0].children[0].value }}</td>
          <td>{{ product_1_feature.children[0].children[0].value }}</td>
          <td>{{ product_2_feature.children[0].children[0].value }}</td>
        </tr>

    {% endfor %}

[websensepro]

Hi, @cesarcor 

Please send ScreenShot of metafield that you add

[websensepro]

this type of image

[cesarcor]

[websensepro]

I have created a solution for you using code.

     var variantRadios = document.querySelector('#variant-radios-template--20630248751138__main'); // Select by tag name
var fieldsetElements = variantRadios.querySelectorAll('fieldset'); // Select all fieldset elements
var firstFieldset = fieldsetElements[1]; // Accessing the first fieldset

firstFieldset.style.display="none";
document.addEventListener('DOMContentLoaded', function() {
  var elements = document.querySelectorAll('label[for="template--20630248751138__main-1-0"]');
  elements.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');
console.log(firstFieldset.style.display="none");
    });
  });
});
  document.addEventListener('DOMContentLoaded', function() {
  var elements1 = document.querySelectorAll('label[for="template--20630248751138__main-1-1"]');
  elements1.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');

console.log(firstFieldset.style.display="none");
    });
  });
});
   document.addEventListener('DOMContentLoaded', function() {
  var elements2 = document.querySelectorAll('label[for="template--20630248751138__main-1-2"]');
  elements2.forEach(function(element) {
    element.addEventListener('click', function() {
      console.log('working');

console.log(firstFieldset.style.display="block");
    });
  });
});
   

[websensepro]

i take Variants in product not from metafield 

Please select any product of your choice.

scroll down there is a option of Variants add then the code work