title: How to get buttonClick this.id to map method dynamically
body: <p>I wanted to fetch the Button Click value and pass it to the map method so only that part of the array is executed, I'm trying the pass the value using back tics. can you guys help me where I'm getting this wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const productData = {
    ProductA: {
      CountryA: [{
          id: 'Product A',
          avilabllity: 'Amazon',
          shopUrl: 'https://'
        }
          
      ],
     CountryB: [{
          id: 'Product B',
          avilabllity: 'Amazon',
          shopUrl: 'https://'
        }
      ],
    },
  }
  
  
  
  $( ".myButton" ).click(function() {
    
    var buttonId = this.id;
    
    //How To Dynmically Get "ProductA" data from this.id on button click so when i Click on ProdctB, this.id will change.
    const mytData = productData.ProductA.CountryA.map(myId =&gt; myId.id);
    
    
   // const whatIWant = productData.`${buttonId}`.CountryA.map(myId =&gt; myId.id);
    //console.log(whatIWant)
    
    console.log(mytData);
    console.log(buttonId)
    
    
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;Button class="myButton" id="productA" &gt;Product A&lt;/Button&gt;
  
  &lt;Button class="myButton" id="productB" &gt;Product B&lt;/Button&gt;
  
  &lt;Button class="myButton" id="productC" &gt;Product C&lt;/Button&gt;</code></pre>
  </div>
  </div>
  </p>