Add an id attributes for each product and make the id property of both of the buttons the id of the product. Existing code: Clorox $20.00 Household Cleaner Add to Cart Remove from Cart Oxiclean $8.00 Household Cleaner Add to Cart Remove from Cart PineSol $11.00 Household Cleaner Add to Cart Remove from Cart Mr Clean $12.00 Household Cleaner Add to Cart Remove from Cart Windex $15.00 Household Cleaner Add to Cart Remove from Cart
Add an id attributes for each product and make the id property of both of the buttons the id of the product.
Existing code:
<!DOCTYPE html>
<html>
<head>
<div class="card">
<img src="img/clorox.jpg">
<h1>Clorox</h1>
<p class="price">$20.00</p>
<p>Household Cleaner</p>
<p><button>Add to Cart</button></p>
<p><button>Remove from Cart</button></p>
</div>
<div class="card">
<img src="img/oxiclean.jpg">
<h1>Oxiclean</h1>
<p class="price">$8.00</p>
<p>Household Cleaner</p>
<p><button>Add to Cart</button></p>
<p><button>Remove from Cart</button></p>
</div>
<div class="card">
<img src="img/pinesol.jpg">
<h1>PineSol</h1>
<p class="price">$11.00</p>
<p>Household Cleaner</p>
<p><button>Add to Cart</button></p>
<p><button>Remove from Cart</button></p>
</div>
<div class="card">
<img src="img/mrclean.jpg">
<h1>Mr Clean</h1>
<p class="price">$12.00</p>
<p>Household Cleaner</p>
<p><button>Add to Cart</button></p>
<p><button>Remove from Cart</button></p>
</div>
<div class="card">
<img src="img/windex.jpg">
<h1>Windex</h1>
<p class="price">$15.00</p>
<p>Household Cleaner</p>
<p><button>Add to Cart</button></p>
<p><button>Remove from Cart</button></p>
</div>
</head>
</html>
Step by step
Solved in 2 steps with 2 images
