Add qty with plus button and increment function #3

css/style.css

@@ -9,12 +9,32 @@
  	color: grey;
  }
 
- .checkForPrint {
+.quantity {
+	display: inline-flex;
+}
+
+
+.plusBt {
+	background-color: #4CAF50; /* Green */
+    border: none;
+    color: white;
+    padding: 2px 8px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 18px;
+    margin: 4px;
+    cursor: pointer;
+}
+
+
+.checkForPrint {
  	display: inline-flex;
  	width: 10px;
  	height: 10px;
  	border-style: solid;
- }
+}
+
 
 /* @media section  */
 @media print  { .noprint  { display: none; } input { display: none; } }

index.html

@@ -15,11 +15,15 @@
 			<input type="checkbox" id="item_1" name="cat1" value="item 1">
 			<div class="checkForPrint"></div>
 			<label for="cat1">Pain</label>
+			<p class="quantity">1</p>
+			<button class="plusBt">+</button>
 		</div>
 		<div class="itemToSelect noprint">
 			<input type="checkbox" id="item_2" name="cat_1" value="item 2">
 			<div class="checkForPrint"></div>
 			<label for="cat_1">beurre</label>
+			<p class="quantity">1</p>
+			<button class="plusBt">+</button>
 		</div>
 	</fieldset>
 
@@ -31,11 +35,15 @@
 			<input type="checkbox" id="item_3" name="cat_2" value="item 1">
 			<div class="checkForPrint"></div>
 			<label for="cat_2">fromage rapé</label>
+			<p class="quantity">1</p>
+			<button class="plusBt">+</button>
 		</div>
 		<div class="itemToSelect noprint">
 			<input type="checkbox" id="item_4" name="cat_2" value="item 2">
 			<div class="checkForPrint"></div>
-			<label for="cat_2">Yahourt	</label>
+			<label for="cat_2">Yahourt</label>
+			<p class="quantity">1</p>
+			<button class="plusBt">+</button>
 		</div>
 	</fieldset>
 	</body>

js/script.js

@@ -36,4 +36,16 @@ function displayItem() {
 }
 
 
-addEventListenerList(items, 'click', displayItem);
\ No newline at end of file
+addEventListenerList(items, 'click', displayItem);
+
+
+
+//plusBt[0].previousElementSibling.innerHTML = Number(plusBt[0].previousElementSibling.innerHTML) + 1;
+let plusBt = document.querySelectorAll('.plusBt');
+
+function incrementQuantity() {
+	console.log(this);
+	this.previousElementSibling.innerHTML = Number(this.previousElementSibling.innerHTML) + 1;
+}
+
+addEventListenerList(plusBt, 'click', incrementQuantity);
\ No newline at end of file