Separate function with same class name by querySelectorAll

I got some functions where the div width will be changed if someone clicks the corresponding button.

I got multiple divs to need the same function, so I use querySelectorAll to get all the elements with class. However, the problem is that all the div widths will be changed at the same time when the button is clicked.

How do I separate them like if I click the button of the first part, only the div from the first part will be affected; If I click the button of the second part, only the div from the second part will be affected.

Even I can duplicate the Javascript then rename the function for the different parts to achieve this result, but it's not making sense. As if I got 100 divs, then I'll have to duplicate 100 times. Please run the below code for a clearer illustration.

const settings = {
  Desktop: {
    width: "100%",
    gridTemplateColumns: "repeat(2,minmax(200px,1fr))"
  },
  Tablet: {
    width: "60%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  },
  Phone: {
    width: "30%",
    gridTemplateColumns: "repeat(1,minmax(200px,1fr))"
  }
}

function resize(which) {
  let x = document.querySelectorAll(".Container");
  for (let i = 0; i < x.length; i++) {
    x[i].style.width = settings[which].width;
  }
  x = document.querySelectorAll(".Setting");
  for (let i = 0; i < x.length; i++) {
    x[i].style.gridTemplateColumns = settings[which].gridTemplateColumns;
  }
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: grey;
}

.hr {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 15px;
}

.Medium {
  margin: 0 15px;
}

.Container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.9s;
  margin: 15px 0;
}

.Setting {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  display: grid;
  text-align: left;
}

.Content {
  width: 200px;
  height: 120px;
  background-color: blue;
}

<div class="hr">
  <button class="Desktop" onclick="resize('Desktop')">Desktop</button>
  <button class="Medium" onclick="resize('Tablet')">Tablet</button>
  <button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
  <p>First Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>
<div class="hr">
  <button class="Desktop" onclick="resize('Desktop')">Desktop</button>
  <button class="Medium" onclick="resize('Tablet')">Tablet</button>
  <button class="Full" onclick="resize('Phone')">Phone</button>
</div>
<div class="Container">
  <p>Second Part</p>
  <div class="Setting">
    <div class="Content"></div>
    <div class="Content"></div>
  </div>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW