title: how to run onclick function with the dynamic string?
body: <p>I am trying to get ID from an API (<strong>ID: food.slug</strong>) now as the value of the ID is <strong>string</strong> I am getting an error.
  <strong>index.html:1 Uncaught ReferenceError: apple_iphone_13_pro_max is not defined
  at HTMLButtonElement.onclick</strong></p>
  <p><strong>This is the code</strong></p>
  <pre><code>const showitem = (foods) =&gt; {
      const parent = document.getElementById('parent');
      for (const food of foods) {
  
          const newdiv = document.createElement('div');
          newdiv.classList.add('col')
          newdiv.innerHTML = `
        
          &lt;div class=&quot;card&quot; &gt;
              &lt;img src=&quot;${food.image}&quot; class=&quot;card-img-top&quot; alt=&quot;...&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;This is a longer card with supporting text below as a natural lead-in to
                      additional content. This content is a little bit longer.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;button onclick=&quot;singleitem(${food.slug})&quot;&gt;details&lt;/button&gt;
          &lt;/div&gt;`;
          console.log(food.slug);
  
          parent.appendChild(newdiv);
  
     }
  }
  </code></pre>