As you can see in the Snippet code below, I have two buttons and one input for each container. Now, The input **calc and sums up** the number of clicks on the 2 buttons in the **same container**. But, it's only working for the **first container**. How can I make it work for each container **separately** **without setting an ID** for each group of inputs?

```js
$(function() {
 $('.click').on('click', function() {
  $(this).val(parseInt($(this).val()) + 1);
 });
 $('.click').click(function() {
  var val1 = +$('.val1').val();
  var val2 = +$('.val2').val();
  $('.count').val(val1+val2);
 });
});
```

```css
.cont {
  border: 1px solid red;
  padding: 10px;
  margin-bottom: 5px;
}

h1 {
  margin: 0;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>First</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>

<h1>Second</h1>
<div class="cont">
  <input type="text" class="count" value="0">
  <input type="button" class="click val1" value="0">
  <input type="button" class="click val2" value="0">
</div>
```