javascriptから生成したhtmlにjavascriptの引数付き関数を埋め込む

Question

前提・実現したいこと

javascriptのfor文を使ってhtmlを生成したのち、そのhtmlに配列から取り出した変数を組み込んで
それぞれ違う商品内容として作ろうとしたのですが、javascriptに埋め込んだhtmlにjavascriptの引数を持つ関数を組み込んで、配列から取り出した変数を引数として渡した時だけどうしてもうまく動きません。

発生している問題・エラーメッセージ

Uncaught ReferenceError: 配列から取り出した変数 is not defined
at HTMLButtonElement.onclick
`

該当のソースコード

<header>
      <h2>Items</h2>
      <ul id="items">
      </ul>
      <h2>Total Price</h2>
      <p id="total">0</p>
    </header>
    <div id="cardcontent" class="container">

      <div  class="card">
        <div class="imgBx">
          <img src="airmax.png" alt="">
        </div>
        <div class="contentBx">
          <h2 id="name">AIRMAX</h2>
          <p id="price">$ 30</p>
          <button onclick = buy("airmax","30")>BUY</button>
        </div>
      </div>

    </div>

var x = parseFloat(document.getElementById("total").innerHTML);//合計金額
      var items = document.getElementById("items").innerHTML;//カゴにある要素
      var itemLists = [
        { item:'moretem', price:70 },
        { item:'shoes', price:17 },
        { item:'stansmith', price:60 }
      ];//htmlに組み込む変数の配列
      for(var i = 0; i < itemLists.length; i++){
        var item = itemLists[i].item;//配列から取り出したアイテムの名前
        var price = itemLists[i].price;//配列から取り出したアイテムの価格
        document.getElementById("cardcontent").innerHTML +=
        `<div class="card">
        <div class="imgBx">
          <img src="${item}.png" alt="">
        </div>
        <div class="contentBx">
          <h2 id="name">${item}</h2>
          <p id="price">$ ${price}</p>
          <button onclick=buy(`+ item + `,` + price+`)>BUY</button>この行の部分がわかりません
        </div>
        </div>`
        console.log(item+price);
        function buy(item,price){
          x += parseFloat(price);
          document.getElementById("total").innerHTML = x; //total priceへ価格記入
          document.getElementById("items").innerHTML += `<li id="itemName">${item}</li><p class="itemPrice">${price}</p>`;
        }
      }

試したこと

thisを埋め込んだりそのまま${}として埋め込んだのですが、${}として埋め込んだ場合全て配列の最後の要素のみがこの関数の引数として指定されてしまいます。他の配列からhtmlに組み込む変数はうまく動いていますが、これだけうまく作動せず、唯一このコードでやったら生成されたhtmlには配列通りに適応していたのですがクリックしてもエラーが起きます。

補足情報（FW/ツールのバージョンなど）

atom1.49.0です

Comments

[yambejp]

動作が確認できません、必要なソースを追記ください

[Lhankor_Mhy]

属性をダブルクォーテーションで囲わない場合、属性値にダブルクォーテーションを含むことはできません。

Answer 1

見た感じクォーテーションがむちゃくちゃです

<button onclick=buy(shoes,17)>BUY</button>
↓↓↓
<button onclick="buy('shoes',17)">BUY</button>

のような処理が必要かも

Comments

[sugichan]

動きました！！！天才！！ありがとうございます！！！！

Answer 2

for文でHTMLを生成する際に同じIDが使用されているのが原因ではないかと思われます。
そもそもbuy関数はループに含めず引数で参照先を変えたほうがいいと思います