1

I need to have multiple buttons each with their own value when clicked in order to display how many of a certain product is bought per day. The issues right now is that they all add up to the same sum even though they all have unique IDs.

I've tried multiple different ways to do the script but they all add to the same sum.

var clicks = 0;

function myFunction1(val) {
  count = clicks += 1;
  document.getElementById("demo1").innerHTML = clicks;
}

var clicks = 0;

function myFunction2() {
  clicks += 1;
  document.getElementById("demo2").innerHTML = clicks;
}
var clicks = 0;

function myFunction3() {
  clicks += 1;
  document.getElementById("demo3").innerHTML = clicks;
}
var clicks = 0;

function myFunction4() {
  clicks += 1;
  document.getElementById("demo4").innerHTML = clicks;
}
var clicks = 0;

function myFunction5() {
  clicks += 1;
  document.getElementById("demo5").innerHTML = clicks;
}
var clicks = 0;

function myFunction6() {
  clicks += 1;
  document.getElementById("demo6").innerHTML = clicks;
}
var clicks = 0;

function myFunction7() {
  clicks += 1;
  document.getElementById("demo7").innerHTML = clicks;
}
var clicks = 0;

function myFunction8() {
  clicks += 1;
  document.getElementById("demo8").innerHTML = clicks;
}
var clicks = 0;

function myFunction9() {
  clicks += 1;
  document.getElementById("demo9").innerHTML = clicks;
}
var clicks = 0;

function myFunction10() {
  clicks += 1;
  document.getElementById("demo10").innerHTML = clicks;
}

function myFunction11() {
  clicks += 1;
  document.getElementById("demo11").innerHTML = clicks;
}
var clicks = 0;

function myFunction12() {
  clicks += 1;
  document.getElementById("demo12").innerHTML = clicks;
}
var clicks = 0;

function myFunction13() {
  clicks += 1;
  document.getElementById("demo13").innerHTML = clicks;
}
var clicks = 0;

function myFunction14() {
  clicks += 1;
  document.getElementById("demo14").innerHTML = clicks;
}
var clicks = 0;

function myFunction15() {
  clicks += 1;
  document.getElementById("demo15").innerHTML = clicks;
}
var clicks = 0;

function myFunction16() {
  clicks += 1;
  document.getElementById("demo16").innerHTML = clicks;
}
var clicks = 0;

function myFunction17() {
  clicks += 1;
  document.getElementById("demo17").innerHTML = clicks;
}
body {
  background: #97CE98;
}

.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.one {
  grid-column: 1/4;
  grid-row: 1;
  display: flex;
}

.two {
  grid-column: 2/4;
  grid-row: 1;
  display: flex;
}

.three {
  grid-column: 3/4;
  grid-row: 1;
  display: flex;
}

.four {
  grid-column: 4/4;
  grid-row: 1;
  display: flex;
}

.five {
  grid-column: 1/4;
  grid-row: 2;
  display: flex;
}

.six {
  grid-column: 2/4;
  grid-row: 2;
  display: flex;
}

.seven {
  grid-column: 3/4;
  grid-row: 2;
  display: flex;
}

.eight {
  grid-column: 4/4;
  grid-row: 2;
  display: flex;
}

.nine {
  grid-column: 1/4;
  grid-row: 3;
  display: flex;
}

.ten {
  grid-column: 2/4;
  grid-row: 3;
  display: flex;
}

.eleven {
  grid-column: 3/4;
  grid-row: 3;
  Display: flex;
}

.twelve {
  grid-column: 4/4;
  grid-row: 3;
  display: flex;
}

.thirteen {
  grid-column: 1/4;
  grid-row: 4;
  display: flex;
}

.fourteen {
  grid-column: 2/4;
  grid-row: 4;
  display: flex;
}

.fifteen {
  grid-column: 3/4;
  grid-row: 4;
  display: flex;
}

.sixteen {
  grid-column: 4/4;
  grid-row: 4;
  display: flex;
}

.seventeen {
  grid-column: 1/4;
  grid-row: 5;
  display: flex;
}
<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="one">
    <button onclick="myFunction1()" style="width:20%" id="demo1">Minced Hot 8oz </button>
  </div>
  <div class="two">
    <button onclick="myFunction2()" style="width:20%" id="demo2">Minced Hot 16oz </button>
  </div>
  <div class="three">
    <button onclick="myFunction3()" style="width:20%" id="demo3">Mindced Hot 24oz </button>
  </div>
  <div class="four">
    <button onclick="myFunction4()" style="width:20%" id="demo4">Chunky Hot 8oz </button>
  </div>
  <div class="five">
    <button onclick="myFunction5()" style="width:20%" id="demo5">Chunky Hot 16oz </button>
  </div>
  <div class="six">
    <button onclick="myFunction6()" style="width:20%" id="demo6">Chunky Hot 24oz </button>
  </div>
  <div class="seven">
    <button onclick="myFunction7()" style="width:20%" id="demo7">Hot Minced 8oz </button>
  </div>
  <div class="eight">
    <button onclick="myFunction8()" style="width:20%" id="demo8">Hot Minced 8oz </button>
  </div>
  <div class="nine">
    <button onclick="myFunction9()" style="width:20%" id="demo9">Hot Minced 8oz </button>
  </div>
  <div class="ten">
    <button onclick="myFunction10()" style="width:20%" id="demo10">Hot Minced 8oz </button>
  </div>
  <div class="eleven">
    <button onclick="myFunction11()" style="width:20%" id="demo11">Hot Minced 8oz </button>
  </div>
  <div class="twelve">
    <button onclick="myFunction12()" style="width:20%" id="demo12">Hot Minced 8oz </button>
  </div>
  <div class="thirteen">
    <button onclick="myFunction13()" style="width:20%" id="demo13">Hot Minced 8oz </button>
  </div>
  <div class="fourteen">
    <button onclick="myFunction14()" style="width:20%" id="demo14">Hot Minced 8oz </button>
  </div>
  <div class="fifteen">
    <button onclick="myFunction15()" style="width:20%" id="demo15">Hot Minced 8oz </button>
  </div>
  <div class="sixteen">
    <button onclick="myFunction16()" style="width:20%" id="demo16">Hot Minced 8oz </button>
  </div>
  <div class="seventeen">
    <button onclick="myFunction17()" style="width:20%" id="demo17">Hot Minced 8oz </button>
  </div>
</div>

When you click on any button they will all add up to the same sum instead of having unique totals.

ThS
  • 4,597
  • 2
  • 15
  • 27
Max Milli
  • 11
  • 3

5 Answers5

3

Why having such a huge number of functions when this could be done with only one that is applied to all the buttons and it will do the counting for each one (button) individually :

  • add the same class for all the buttons that are having the count functionality (not really necessary but it help us categorize each component in the page based on its role) that will help us select them in JavaScript.
  • add a click handler to these buttons (remove all the onclick attributes from HTML) directly in JavaScript which will count the clicks for every button separately (each button has its own counter).
  • the clicks counters are stored in an array of number of the buttons elements element (its length).

The next demo will help you more, it also contains some helpful comments :

/**
* btns: the buttons having the "btn-click-count" class (an array).
* btnsClicksCountArr: array to store the click counters for each button
**/
const btns = [...document.querySelectorAll('button.btn-click-count')],
  btnsClicksCountArr = new Array(btns.length);

/** cycle through the buttons and apply a click handler for each one **/

/**
* el: the current button from the array of buttons (btns).
* i: its index in that array.
**/

btns.forEach((el, i) => {
  /** initialize the btnsClicksCountArr at the index i with 0 **/
  btnsClicksCountArr[i] = 0;
  
  /** add click event handler for the current button in the array (btns) **/
  el.addEventListener('click', () => el.textContent = ++btnsClicksCountArr[i]); /** increment the value stored in btnsClicksCountArr at the index i (the same index for that current button in the array btns) and write it in the button **/
});
body {
  background: #97CE98;
}

.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.one {
  grid-column: 1/4;
  grid-row: 1;
  display: flex;
}

.two {
  grid-column: 2/4;
  grid-row: 1;
  display: flex;
}

.three {
  grid-column: 3/4;
  grid-row: 1;
  display: flex;
}

.four {
  grid-column: 4/4;
  grid-row: 1;
  display: flex;
}

.five {
  grid-column: 1/4;
  grid-row: 2;
  display: flex;
}

.six {
  grid-column: 2/4;
  grid-row: 2;
  display: flex;
}

.seven {
  grid-column: 3/4;
  grid-row: 2;
  display: flex;
}

.eight {
  grid-column: 4/4;
  grid-row: 2;
  display: flex;
}

.nine {
  grid-column: 1/4;
  grid-row: 3;
  display: flex;
}

.ten {
  grid-column: 2/4;
  grid-row: 3;
  display: flex;
}

.eleven {
  grid-column: 3/4;
  grid-row: 3;
  Display: flex;
}

.twelve {
  grid-column: 4/4;
  grid-row: 3;
  display: flex;
}

.thirteen {
  grid-column: 1/4;
  grid-row: 4;
  display: flex;
}

.fourteen {
  grid-column: 2/4;
  grid-row: 4;
  display: flex;
}

.fifteen {
  grid-column: 3/4;
  grid-row: 4;
  display: flex;
}

.sixteen {
  grid-column: 4/4;
  grid-row: 4;
  display: flex;
}

.seventeen {
  grid-column: 1/4;
  grid-row: 5;
  display: flex;
}
<!-- removed all the "onclick" attributes as this (attaching event listeners) will be placed in the JavaScript part -->

<!-- added a class of "btn-click-count" to all the buttons that will have counters -->

<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="one">
    <button class="btn-click-count" style="width:20%" id="demo1">Minced Hot 8oz </button>
  </div>
  <div class="two">
    <button class="btn-click-count" style="width:20%" id="demo2">Minced Hot 16oz </button>
  </div>
  <div class="three">
    <button class="btn-click-count" style="width:20%" id="demo3">Mindced Hot 24oz </button>
  </div>
  <div class="four">
    <button class="btn-click-count" style="width:20%" id="demo4">Chunky Hot 8oz </button>
  </div>
  <div class="five">
    <button class="btn-click-count" style="width:20%" id="demo5">Chunky Hot 16oz </button>
  </div>
  <div class="six">
    <button class="btn-click-count" style="width:20%" id="demo6">Chunky Hot 24oz </button>
  </div>
  <div class="seven">
    <button class="btn-click-count" style="width:20%" id="demo7">Hot Minced 8oz </button>
  </div>
  <div class="eight">
    <button class="btn-click-count" style="width:20%" id="demo8">Hot Minced 8oz </button>
  </div>
  <div class="nine">
    <button class="btn-click-count" style="width:20%" id="demo9">Hot Minced 8oz </button>
  </div>
  <div class="ten">
    <button class="btn-click-count" style="width:20%" id="demo10">Hot Minced 8oz </button>
  </div>
  <div class="eleven">
    <button class="btn-click-count" style="width:20%" id="demo11">Hot Minced 8oz </button>
  </div>
  <div class="twelve">
    <button class="btn-click-count" style="width:20%" id="demo12">Hot Minced 8oz </button>
  </div>
  <div class="thirteen">
    <button class="btn-click-count" style="width:20%" id="demo13">Hot Minced 8oz </button>
  </div>
  <div class="fourteen">
    <button class="btn-click-count" style="width:20%" id="demo14">Hot Minced 8oz </button>
  </div>
  <div class="fifteen">
    <button class="btn-click-count" style="width:20%" id="demo15">Hot Minced 8oz </button>
  </div>
  <div class="sixteen">
    <button class="btn-click-count" style="width:20%" id="demo16">Hot Minced 8oz </button>
  </div>
  <div class="seventeen">
    <button class="btn-click-count" style="width:20%" id="demo17">Hot Minced 8oz </button>
  </div>
</div>

Some useful links :

Learn more about addEventListener function.

Learn more about forEach function.

Community
  • 1
  • 1
ThS
  • 4,597
  • 2
  • 15
  • 27
0

This is because you are using the same variable, "clicks"

If you make each variable unique: clicks1, clicks2, etc. you can store them as separate counters.

Or better yet, you can store them as an array.

<p align="center">TPG Product Counter</p>
<div align="center" class="btn-group">
  <div class="col-1 row-1">
    <button onclick="myFunction(1)" style="width:70%" id="demo1">Minced Hot 8oz </button> <span id="output1" class="output"></span>
  </div>
  <div class="col-2 row-1">
    <button onclick="myFunction(2)" style="width:70%" id="demo2">Minced Hot 16oz </button> <span id="output2" class="output"></span>
  </div>
  <div class="col-3 row-1">
    <button onclick="myFunction(3)" style="width:70%" id="demo3">Mindced Hot 24oz </button> <span id="output3" class="output"></span>
  </div>
 <div class="col-4 row-1">
    <button onclick="myFunction(4)" style="width:70%" id="demo4">Chunky Hot 8oz </button> <span id="output4" class="output"></span>
  </div>
  <div class="col-1 row-2">
    <button onclick="myFunction(5)" style="width:70%" id="demo5">Chunky Hot 16oz </button> <span id="output5" class="output"></span>
  </div>
  <div class="col-2 row-2">
    <button onclick="myFunction(6)" style="width:70%" id="demo6">Chunky Hot 24oz </button> <span id="output6" class="output"></span>
  </div>
  <div class="col-3 row-2">
    <button onclick="myFunction(7)" style="width:70%" id="demo7">Hot Minced 8oz </button> <span id="output7" class="output"></span>
  </div>
  <div class="col-4 row-2">
    <button onclick="myFunction(8)" style="width:70%" id="demo8">Hot Minced 8oz </button> <span id="output8" class="output"></span>
  </div>
  <div class="col-1 row-3">
    <button onclick="myFunction(9)" style="width:70%" id="demo9">Hot Minced 8oz </button> <span id="output9" class="output"></span>
  </div>
  <div class="col-2 row-3">
    <button onclick="myFunction(10)" style="width:70%" id="demo10">Hot Minced 8oz </button> <span id="output10" class="output"></span>
  </div>
  <div class="col-3 row-3">
    <button onclick="myFunction(11)" style="width:70%" id="demo11">Hot Minced 8oz </button> <span id="output11" class="output"></span>
  </div>
  <div class="col-4 row-3">
    <button onclick="myFunction(12)" style="width:70%" id="demo12">Hot Minced 8oz </button> <span id="output12" class="output"></span>
  </div>
  <div class="col-1 row-4">
    <button onclick="myFunction(13)" style="width:70%" id="demo13">Hot Minced 8oz </button> <span id="output13" class="output"></span>
  </div>
  <div class="col-2 row-4">
    <button onclick="myFunction(14)" style="width:70%" id="demo14">Hot Minced 8oz </button> <span id="output14" class="output"></span>
  </div>
  <div class="col-3 row-4">
    <button onclick="myFunction(15)" style="width:70%" id="demo15">Hot Minced 8oz </button> <span id="output15" class="output"></span>
  </div>
  <div class="col-4 row-4">
    <button onclick="myFunction(16)" style="width:70%" id="demo16">Hot Minced 8oz </button> <span id="output16" class="output"></span>
  </div>
  <div class="col-1 row-5">
    <button onclick="myFunction(17)" style="width:70%" id="demo17">Hot Minced 8oz </button> <span id="output17" class="output"></span>
  </div>
</div>

<script>
var arrayLength = 17;  // Make this the number of buttons you have
var clicks = Array(arrayLength).fill(0);
function myFunction(val) {
  clicks[val-1] += 1;
  document.getElementById("output"+val).innerHTML = clicks[val-1];
}
</script>

<style>
body {
  background: #97CE98;
}

.output {padding-left:20px;}
.btn-group {
  display: grid;
  grid-template-columns: 4;
  grid-row: 5 minmax(100px, auto);
  grid-gap: 5px;
}

.col-1 {grid-column: 1;display: flex;}
.col-2 {grid-column: 2;display: flex;}
.col-3 {grid-column: 3;display: flex;}
.col-4 {grid-column: 4;display: flex;}
.row-1 {grid-row: 1;}
.row-2 {grid-row: 2;}
.row-3 {grid-row: 3;}
.row-4 {grid-row: 4;}
.row-5 {grid-row: 5;}
</style>

To add to a variable in an array you make myArray[X] = myInput; where X is the position in the array. In the above example, you pass myFunction() the position you want to use; so, that the function applies it to the right place. Of note, array positions start at 0 not 1. Since your IDs begin at 1 and am using val-1 for the position so that you can keep consistant nameing, or you can start naming your ids at 0 and then you don't need to adjust for this.

Nosajimiki
  • 1,073
  • 1
  • 9
  • 17
  • How would I make an array? I’m very new to this. – Max Milli Jul 31 '19 at 18:33
  • I've seen that, but how would I add the clickable buttons into this – Max Milli Jul 31 '19 at 18:59
  • *`var clicks = [0,0,0]`* but what if there's a random number of buttons, what would you do ? – ThS Jul 31 '19 at 19:14
  • If someone could simpley post the fixed script in its intirety that would be awesome because I am trying to frankenstein this together and getting no where – Max Milli Jul 31 '19 at 19:18
  • @ths I'm trying not to confuse the OP with too much code he may not be familar with, but since you bring it up "Array(arrayLength).fill(0);" will create an array of zeros at a specified length. – Nosajimiki Jul 31 '19 at 19:25
  • I clearly know that you're aiming for simplicity (and that's good to maintain a balanced levels of knowledge), but *make it simple not simpler* so you'd better provide a solution that could be applied no matter how many button to count it's clicks. @MaxMilli check my answer you it may illuminate how things could be done. – ThS Jul 31 '19 at 19:29
  • @MaxMilli The above code should work, you just need to add back in your own CSS. – Nosajimiki Jul 31 '19 at 19:31
  • I tried this and the values display at the bottom with no way of being able to tell which button they correspond to – Max Milli Jul 31 '19 at 19:36
  • Without knowing how you intend to output the results, I can't write that code for you, but with the above change to the function, you can make something like "
    Hot Minced 8oz:
    " as a place to output the data, a single data element from the array.     – Nosajimiki Jul 31 '19 at 19:47
  • All I am looking for is a simple counter, When the product is clicked, another value is added so at the end of the day we know how many of one product has been sold, the name also changes just to the value and I'm ready to rip my hair out – Max Milli Jul 31 '19 at 20:32
  • I anyone would just post the fixed and full code so I can continue this project I would be happy, no matter how many times I do what you people say it doesn't work – Max Milli Jul 31 '19 at 21:17
  • Here is a working demo: https://jsfiddle.net/6h48bwLd/ Just copy and paste the code. If this still does not work, it's probably because there is a problem elsewhere in your code. – Nosajimiki Jul 31 '19 at 21:54
0

1- get all btn
2- with a loop find which btn clicked.
3- get the id.
4- set counter
5- save counter as attribute data-counter
7- now play with data-counter. 

const btn= document.querySelectorAll('button');
for (var i = 0; i < btn.length; i += 1) {
    btn[i].onclick = function(e) {
        let selector = document.getElementById(this.id);
        let dataCount = selector.getAttribute('data-count');
        if(dataCount == 0) {
          dataCount = 1;
          let productName = selector.innerHTML;
        }else{
          dataCount = Number(dataCount) + 1;
        }
        selector.setAttribute('data-count', dataCount);
        
        selector.innerHTML = dataCount;
    };
}
<!DOCTYPE html>
<html>
<head>

<Style> 

    body{background: #97CE98;}

  button{width:auto}

.btn-group {        
    display: grid; 
    grid-template-columns: 4;
    grid-row: 5 minmax(100px,auto);
    grid-gap: 5px;

    }
.one {
    grid-column: 1/4;
    grid-row:1;
    display: flex;

    }
    .two {
    grid-column: 2/4;
    grid-row:1;
    display: flex;
    }
    .three {
    grid-column: 3/4;
    grid-row:1;
    display: flex;
    }
    .four {
    grid-column: 4/4;
    grid-row:1;
    display: flex;
    }
    .five {
    grid-column: 1/4;
    grid-row:2;
    display: flex;
    }
    .six {
    grid-column: 2/4;
    grid-row:2;
    display: flex;
    }
    .seven {
    grid-column: 3/4;
    grid-row:2;
    display: flex;
    }
    .eight {
    grid-column: 4/4;
    grid-row:2;
    display: flex;
    }
    .nine {
    grid-column: 1/4;
    grid-row:3;
    display: flex;
    }
    .ten {
    grid-column: 2/4;
    grid-row:3;
    display: flex;
    }
    .eleven {
    grid-column: 3/4;
    grid-row:3;
    Display: flex;
    }
    .twelve {
    grid-column: 4/4;
    grid-row:3;
    display: flex;
    }
    .thirteen {
    grid-column: 1/4;
    grid-row:4;
    display: flex;
    }
    .fourteen {
    grid-column: 2/4;
    grid-row:4;
    display: flex;
    }
    .fifteen {
    grid-column: 3/4;
    grid-row:4;
    display: flex;
    }
    .sixteen {
    grid-column: 4/4;
    grid-row:4;
    display: flex;
    }
    .seventeen {
    grid-column: 1/4;
    grid-row:5;
    display: flex;
    }






    </Style>


<script>

</script>


</head>
<body>

<p align="center">TPG Product Counter</p>



<div align="center" class="btn-group">
  
  <div class="one"><button id="demo1">Minced Hot 8oz </button></div>
    <div class="two"><button   id="demo2">Minced Hot 16oz </button></div>
    <div class="three"><button  id="demo3">Mindced Hot 24oz </button></div>
    <div class="four"><button  id="demo4">Chunky Hot 8oz </button></div>
    <div class="five"><button   id="demo5">Chunky Hot 16oz </button></div>
    <div class="six"><button  id="demo6">Chunky Hot 24oz </button></div>
    <div class="seven"><button id="demo7">Hot Minced 8oz </button></div>
    <div class="eight"><button  id="demo8">Hot Minced 8oz </button></div>
    <div class="nine"><button  id="demo9">Hot Minced 8oz </button></div>
    <div class="ten"><button id="demo10">Hot Minced 8oz </button></div>
    <div class="eleven"><button  id="demo11">Hot Minced 8oz </button></div>
    <div class="twelve"><button id="demo12">Hot Minced 8oz </button></div>
    <div class="thirteen"><button id="demo13">Hot Minced 8oz </button></div>
    <div class="fourteen"><button  id="demo14">Hot Minced 8oz </button></div>
    <div class="fifteen"><button id="demo15">Hot Minced 8oz </button></div>
    <div class="sixteen"><button id="demo16">Hot Minced 8oz </button></div>
    <div class="seventeen"><button  id="demo17">Hot Minced 8oz </button></div>

    </div>
Hossein Shourabi
  • 426
  • 4
  • 15
  • access to the `DOM` is very expansive (performance) why you have to access the `data-count` every click when you can store all te counters in an array and access the `DOM` for only one time to replace the text. See my answer if you want. – ThS Jul 31 '19 at 19:17
  • That's right, and your code is great. Good job @ths. In this case, I use this DOM because this is readability for new contributor. – Hossein Shourabi Aug 01 '19 at 05:33
  • thanks for acknowledgement, my comment was just in search for making SO better. – ThS Aug 01 '19 at 10:43
0

You could use:

// target all buttons & parsing nodeList to arrayList (ES6 feature)
const buttons = [...document.querySelectorAll("button")];

// apply reduce on buttons to get his ids as key of properties with values = 0; 
// inside the object called "values" :
// values: { demo1: 0, demo2: 0, ... }
const values = buttons.reduce((acc, item) => {
  acc[item.id] = 0;
  return acc;
}, {});

// adding listerners with event "click" for each button, to take his value 
// in the object called "values" according his name key property to be
// insert as his innerHTML
buttons.forEach(button => {
  button.addEventListener("click", function() {
    this.innerHTML = values[this.id]++;
  });
});
<div class="one"><button style="width:20%" id="demo1">Minced Hot 8oz </button></div>
    <div class="two"><button style="width:20%" id="demo2">Minced Hot 16oz </button></div>
    <div class="three"><button style="width:20%" id="demo3">Mindced Hot 24oz </button></div>
    <div class="four"><button style="width:20%" id="demo4">Chunky Hot 8oz </button></div>
    <div class="five"><button style="width:20%" id="demo5">Chunky Hot 16oz </button></div>
    <div class="six"><button style="width:20%" id="demo6">Chunky Hot 24oz </button></div>
    <div class="seven"><button style="width:20%" id="demo7">Hot Minced 8oz </button></div>
    <div class="eight"><button style="width:20%" id="demo8">Hot Minced 8oz </button></div>
    <div class="nine"><button style="width:20%" id="demo9">Hot Minced 8oz </button></div>
    <div class="ten"><button style="width:20%" id="demo10">Hot Minced 8oz </button></div>
    <div class="eleven"><button style="width:20%" id="demo11">Hot Minced 8oz </button></div>
    <div class="twelve"><button style="width:20%" id="demo12">Hot Minced 8oz </button></div>
    <div class="thirteen"><button style="width:20%" id="demo13">Hot Minced 8oz </button></div>
    <div class="fourteen"><button style="width:20%" id="demo14">Hot Minced 8oz </button></div>
    <div class="fifteen"><button style="width:20%" id="demo15">Hot Minced 8oz </button></div>
    <div class="sixteen"><button style="width:20%" id="demo16">Hot Minced 8oz </button></div>
    <div class="seventeen"><button style="width:20%" id="demo17">Hot Minced 8oz </button></div>
Christian Carrillo
  • 2,751
  • 2
  • 9
  • 15
0

I would do it like that:

var buttons = document.querySelectorAll("div#demo button"); // this will select all buttons inside demo div
var clicks = []; // this hold the clicks count
for (var i=0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    clicks.push(this.id); // add the id of the button that been clicked to the arrays
    // taken from here: https://stackoverflow.com/a/32886673/6525081
    var map = clicks.reduce(function(prev, cur) {
      prev[cur] = (prev[cur] || 0) + 1;
      return prev;
    }, {});
    document.querySelector('div#demo2').textContent = (JSON.stringify(map));
  });
}
<div id="demo">
  <div class="one"><button style="width:20%" id="demo1">Minced Hot 8oz </button></div>
  <div class="two"><button style="width:20%" id="demo2">Minced Hot 16oz </button></div>
  <div class="three"><button style="width:20%" id="demo3">Mindced Hot 24oz </button></div>
  <div class="four"><button style="width:20%" id="demo4">Chunky Hot 8oz </button></div>
  <div class="five"><button style="width:20%" id="demo5">Chunky Hot 16oz </button></div>
  <div class="six"><button style="width:20%" id="demo6">Chunky Hot 24oz </button></div>
  <div class="seven"><button style="width:20%" id="demo7">Hot Minced 8oz </button></div>
  <div class="eight"><button style="width:20%" id="demo8">Hot Minced 8oz </button></div>
  <div class="nine"><button style="width:20%" id="demo9">Hot Minced 8oz </button></div>
  <div class="ten"><button style="width:20%" id="demo10">Hot Minced 8oz </button></div>
  <div class="eleven"><button style="width:20%" id="demo11">Hot Minced 8oz </button></div>
  <div class="twelve"><button style="width:20%" id="demo12">Hot Minced 8oz </button></div>
  <div class="thirteen"><button style="width:20%" id="demo13">Hot Minced 8oz </button></div>
  <div class="fourteen"><button style="width:20%" id="demo14">Hot Minced 8oz </button></div>
  <div class="fifteen"><button style="width:20%" id="demo15">Hot Minced 8oz </button></div>
  <div class="sixteen"><button style="width:20%" id="demo16">Hot Minced 8oz </button></div>
  <div class="seventeen"><button style="width:20%" id="demo17">Hot Minced 8oz </button></div>
</div>
<div id="demo2"></div>
A. Meshu
  • 4,053
  • 2
  • 20
  • 34