Как дать форме конкретный идентификатор для корзины, когда она добавлена

Question

У меня есть веб-страница, на которой, если вы щелкнете по названию продукта, откроется описание продукта, а также форма с надписью «Добавить в корзину». Это не работает.

Одна и та же форма появляется на всех моих продуктах, поэтому независимо от того, какой продукт я выбрал, в нем не указывается, какой продукт я хочу добавить в корзину, так как он добавляется ко всем продуктам.

Я хочу, чтобы он работал, чтобы я мог нажать на название продукта, описание и форма всплывают на той же странице (эта часть работает), но затем, когда я изменяю количество на число, нажимаю «Добавить в корзину». 'в форме у него есть собственный уникальный идентификатор, и я действительно смогу ввести его в корзину как свой собственный продукт.

Это то, что я имею до сих пор, я просто еще не создал код для моей реальной корзины, но, поскольку я знаю, что я делаю что-то не так, насколько я могу видеть, независимо от формы, которую я использую в любой продукт, результат одинаков независимо от продукта.

function drawPage() {
  $.get('/products', function(data) {
    console.log(data);
    var prod = data.products;

    for (var i = 0; i < prod.length; i++) {
      var el = document.createElement('P');
      el.innerHTML = prod[i].name;
      el.addEventListener('click', function(event) {
        console.log(event.target.textContent);
        for (var i = 0; i < prod.length; i++) {
          if (prod[i].name == event.target.textContent) {
            $('#pro').html('');
            $('#pro').html(prod[i].name +
              prod[i].description + '<img src=' + prod[i].image_url + '>' + "Price: " +
              prod[i].unit_cost);

            $("#pro").append(
              $("<form/>", {
                action: '#',
                method: '#'
              }).append($("<input/>", {
                type: 'number',
                id: 'pro',
                name: 'productname',
                placeholder: 'Quantity'
              }), $("<br/>"), $("<input/>", {
                type: 'submit',
                id: 'submit',
                value: 'Add to Cart'
              }))
            )
          }
        }
      })
      $('#app').append(el);
    }
  })
}

document.addEventListener('load', drawPage());

<div id="cart-container">
  <h1>My Cart</h1>
  <table id="myCart" border="1">
    <tr>
      <th>Item name</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
    <tr style="display: none; border-top: 2px solid black">
      <td colspan="3">Subtotal</td>
      <td class="right subtotal"></td>
    </tr>
  </table>
</div>

Answer 1

Я просто предполагаю, что ваши продукты - это пара объектов в формате json, а затем вы можете просто передать их:

var products = [
{id: 1, name: 'Product 1', desc: 'product 1 desc'},
{id: 2, name: 'Product 2', desc: 'product 2 desc'},
{id: 3, name: 'Product 3', desc: 'product 3 desc'},
{id: 4, name: 'Product 4', desc: 'product 4 desc'},
];

$.each(products, function() {
    addProduct(this);
});

function addProduct(product) {
    var link = $('<button></button>').text(product.name);
    link.on('click', function(){
        loadProduct(product);
    });
    $('#products').append(link);
}

function loadProduct(product) {
    $('#product-display').empty();
    var desc = $('<div></div>').html(product.name + '<br/>' + product.desc);
    var btn = $('<button></button>').text('add').on('click', function() {
        addToCart(product);
    });
    $('#product-display').append(desc).append(btn);
}

function addToCart(product) {
    $('#cart').append($("<span></span>").text(product.name));
    $('#cart').append("<br/>")
};

HTML:

<div id="products"></div>
<div id="product-display"></div>
<div id="cart"></div>

jsfiddle