Prevent the activation of div elements with identical attributes

I have created two separate div elements with unique IDs, but they share the same attributes. Below is the structure of the first div:

<div id="espresso-option" class="option">
  <div class="container">
    <div class="type">
      <p>Type</p>
          <input type="radio" id="houseEspresso" name="type" checked="checked" onclick="addProduct(this)">
          <label for="houseEspresso">House Espresso</label><br>
          <input type="radio" id="guestEspresso" name="type" onclick="addProduct(this)">
          <label for="guestEspresso">Guest Espresso</label><br>
    </div>
    <div class="size">
      <p>Size</p>
          <input type="radio" id="single" name="size" value="25000" onclick="addProduct(this)">
          <label for="single">Single Espresso</label><br>
          <input type="radio" id="double" name="size" value="50000" checked="checked" onclick="addProduct(this)">
          <label for="double">Double Espresso</label><br>
    </div>
    <div class="extra">
      <p>Extras</p>
          <input type="radio" id="none" name="extra" value="0" checked="checked" onclick="addProduct(this)">
          <label for="milk">None</label><br>
          <input type="radio" id="hotmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="hotmilk">Hot milk</label><br>
          <input type="radio" id="coldmilk" name="extra" value="10000" onclick="addProduct(this)">
          <label for="coldmilk">Cold milk</label><br>
          <input type="checkbox" id="chocolate" name="extra" value="10000" onclick="addProduct(this)">
          <label for="chocolate">Chocolate Dusting</label><br>
          <input type="checkbox" id="marshmallow" name="extra" value="10000" onclick="addProduct(this)">
          <label for="marshmallow">Marshmallows</label><br>
          <input type="checkbox" id="cream" name="extra" value="10000" onclick="addProduct(this)">
          <label for="cream">Whipped Cream</label><br>
    </div>
  </div>

  <div class="add-to-cart">
    <strong class="product-price-title">Price: </strong>
    <span class="product-price">0</span>
  </div>
  <button type="button" class="btn btn-cart">Add product</button>

</div>

Now, let's take a look at the second div element:

<div id="cappuccino-option" class="option">
  <!-- Same structure as above without any changes -->
</div>

To calculate the price and add the selected products to the cart using JavaScript, a specific function has been implemented. However, there seems to be an issue when adding more than one product due to the buttons having the same name attribute. Any suggestions on how to resolve this with pure HTML, CSS, and JavaScript would be greatly appreciated. Thank you!

Answer №1

<p id="product-size">Select Size</p>
const selectedSize = document.getElementById("product-option").querySelectorAll("p#product-size").value;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Multer is experiencing difficulties in uploading files, yet it is not displaying any error messages

When setting up an application to create courses with images, I encountered an issue while using multer for image uploading. Despite adding multer to my route with upload.single('images'), the uploaded images were not appearing in the designated ...

When outputting the $http response in the console, Angular displays null instead of the expected result,

I have encountered a peculiar issue with my local webservice developed using Spring. Everything seems to be functioning correctly when accessing it through the browser or Postman, but for some reason, when attempting a simple GET method with Angular/Ionic, ...

When the component is initialized, the computed property is not being evaluated

My maps component initializes a Google map, adds markers based on props passed from the parent, and sets the correct bounds of the map. However, the markers are added through a computed property to make it reactive. Everything seems to be working fine, exc ...

What is the method for inserting a clickable link into a data-image line of code using CSS3?

Recently, I delved into the world of CSS and am still getting the hang of it, Below is a snippet of code that I have been working on, <div id='ninja-slider'> <ul> <li> <div data-image="images/md/1.j ...

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

The rsuite table does not properly reflect changes in state data

This is the render method that I am working on render() { return ( <Contentbox> <ol> {this.state.data.map((obj) => ( <li key={obj._id}>{obj.name}</li> ) ...

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

Encountering difficulties invoking a REST web service using HTML/JavaScript with parameter

I am just starting out with web services and learning about HTML/Javascript. Recently, I created a RESTful web service in Java that takes a username from an HTML form and returns it back to the same page using the alert() function. Below is the code for m ...

Set Bootstrap column size to match a particular column

I am currently using BootStrap 4 and I am attempting to make a column's height equal to another column. Below is the code snippet I am working with: <div class="container" style="overflow:hidden"> <div class="row" style="overflow:hidden" ...

Why does refreshing a page in AngularJS cause $rootScope values to disappear?

On my local route http://localhost:9000/#/deviceDetail/, there is a controller that handles the view. Before navigating to this view, I set certain variables on the $rootScope (such as $rootScope.dashboards). While on the view, I have access to the dashbo ...

NPM repository that is not accessible online

I have been looking into creating my own private NPM mirror/repository, but I'm not sure where to start. My objective is to create a repository within my private network that contains all the latest free NPM packages available on the NPM website. I w ...

Convert the background image (specified in the CSS with background-image) into a PHP variable

I am looking to create a product gallery featuring 5 products, each with its own background image attribute. I am using a loop to insert the product images and I want each loop to display a different background-image. One approach I have considered is usi ...

Incorporating SVG line elements into a line graph

After successfully creating an interactive line chart using nvd3, I am now looking to enhance it by adding an svg line to represent a baseline. Within my function that constructs and displays the line chart, I have the following code: function _buildGrap ...

Incorporating an HTML page into a tab through Ajax with the help of a for loop, utilizing Bootstrap 3

Currently, I am developing an Address Book application where the main page displays a series of tabs with the names of the contacts from the contact.objects using a for loop in the code below. How can I utilize ajax to load the information of each contact ...

Error in Jquery validation caused by incorrect file extension type

Within my HTML form, I have multiple inputs set up for validation purposes: <form role="form" id="addForm" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="userName">U ...

React Sentry Error: Attempting to access properties of undefined object (reading 'componentStack')

Utilizing the ErrorBoundry component from Sentry in my react project has been a goal of mine. I aim to confine the errors reported to Sentry specifically for my React app, as it is deployed on multiple websites and I want to avoid picking up every JS error ...

Having issues with my Angular directive not receiving data from the controller

I am encountering an issue with my controller .controller('Main', ['$scope', function ($scope) { $scope.uiState = {'name': 'test'}; }]) My directive is structured as follows scope: {uiState: '=& ...

Creating a custom table layout with JavaScript and jQuery

I've been grappling with a project for some time now, and I'm stuck on this particular issue. In my database, I have a table structured like this: ProjectName UserName SpentDays FirstProject User1 10 SecondProject User1 5 SecondProjec ...

Unable to send multiple onChange AJAX requests

Why do I keep getting the error Notice: Undefined index: provinsi when trying to retrieve values from tahun and provinsi using this code? If I remove provinsi from the code and only use tahun, I am able to successfully fetch data from my database. func ...