title: How do I get these to act on their own in their separate containers?
body: <p>I am a javascript/jquery novice and what I am trying to figure out is when you click the plus or minus buttons the numbers increase/decrease. However I have two sets of these in different containers but they both change their values when clicking on just one set. How can I separate these?</p>
  
  <p>I looked up this javascript/jquery code on stackoverflow to make the plus/minus buttons to work and now I would like to get insight on how to make these work separately. Please help? Any help is appreciated!</p>
  
  <p>Here is my demo: <a href="https://jsfiddle.net/hyona/yerfdkvk/" rel="nofollow noreferrer">https://jsfiddle.net/hyona/yerfdkvk/</a></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;input type='button' value='-' class='qtyminus' field='quantity' /&gt;
    &lt;input type='text' name='quantity' value='1' class='qty' /&gt;
    &lt;input type='button' value='+' class='qtyplus' field='quantity' /&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;input type='button' value='-' class='qtyminus' field='quantity' /&gt;
    &lt;input type='text' name='quantity' value='1' class='qty'/&gt;
    &lt;input type='button' value='+' class='qtyplus' field='quantity' /&gt;
  &lt;/div&gt;
  
  
  //CSS Styling
  .container {
    width: 120px;
    margin: 0 0 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  .qty {
    width: 50px;
    height: 30px;
    text-align: center;
  }
  
  input[type='button'] {
    border: none;
    background: none;
    font-size: 18px;
    outline: none;
    cursor: pointer;
  }
  
  
  
  $(document).ready(function(){
    $('.qtyplus').click(function(e){
      e.preventDefault();
      fieldName = $(this).attr('field');
      var currentVal = parseInt($('input[name='+fieldName+']').val());
      if (!isNaN(currentVal)) {
        if (currentVal &lt; 20)
        {
          $('input[name='+fieldName+']').val(currentVal + 1);
          $('.qtyminus').val("-").removeAttr('style');
        }
        else
        {
          $('.qtyplus').val("+").css('color','#aaa');
        }
      } else {
        $('input[name='+fieldName+']').val(1);
      }
    });
  
    $(".qtyminus").click(function(e) {
      e.preventDefault();
      fieldName = $(this).attr('field');
      var currentVal = parseInt($('input[name='+fieldName+']').val());
      if (!isNaN(currentVal) &amp;&amp; currentVal &gt; 1) {
        $('input[name='+fieldName+']').val(currentVal - 1);
        $('.qtyplus').val("+").removeAttr('style');
      } else {
        $('input[name='+fieldName+']').val(1);
        $('.qtyminus').val("-").css('color','#aaa');
      }
    });
  });
  </code></pre>