Add Product Attributes

<form>
  <label for="product-name">Product Name:</label>
  <input type="text" id="product-name" name="product-name"><br><br>
  
  <label for="product-price">Product Price:</label>
  <input type="number" id="product-price" name="product-price"><br><br>
  
  <hr>
  
  <h2>Add Custom Attributes</h2>
  
  <label for="attribute-name">Attribute Name:</label>
  <input type="text" id="attribute-name" name="attribute-name"><br><br>
  
  <label for="attribute-value">Attribute Value:</label>
  <input type="text" id="attribute-value" name="attribute-value"><br><br>
  
  <button type="button" id="add-attribute-btn">Add Attribute</button>
  
  <hr>
  
  <h2>Product Attributes</h2>
  
  <ul id="product-attributes"></ul>
  
  <button type="submit">Submit</button>
</form>

<script>
  const attributeList = [];
  const addAttributeBtn = document.getElementById("add-attribute-btn");
  const productAttributes = document.getElementById("product-attributes");
  
  addAttributeBtn.addEventListener("click", function() {
    const attributeName = document.getElementById("attribute-name").value;
    const attributeValue = document.getElementById("attribute-value").value;
    const attribute = attributeName + ": " + attributeValue;
    attributeList.push(attribute);
    const li = document.createElement("li");
    li.textContent = attribute;
    productAttributes.appendChild(li);
    document.getElementById("attribute-name").value = "";
    document.getElementById("attribute-value").value = "";
  });
</script>