输入框中的值增量逻辑

Question

我已经创建了几个带有一些逻辑的输入框。我需要为一个输入框创建一个逻辑，如果它是第一次单击，它应该将值从0增加到2，然后只是正常增量+1。所以要说清楚，增加内容应如下：

0＆gt; 2＆gt; 3> 4

如果用户点击减号，它应该减1，除非它的值为2，而减法应该为0，所以解释如下：

4＆gt; 3> 2＆gt; 0

    $("#1, #2, #3, #4").prop('disabled', true);
    
    $('.add').click(function () {
    
    var value1 = $('#1').val();
    var value2 = $('#2').val();
    var value3 = $('#3').val();
    var value4 = $('#4').val();
    
    var totalValue = parseInt(value1) + parseInt(value2) + parseInt(value3) + parseInt(value4);
    
    if ( totalValue >= 5){
        $('.add').prop('disabled', true);
      } else {
        $(this).prev().val(+$(this).prev().val() + 1);
      }
      
    });
    
    $('.sub').click(function () {
        if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);    
    });

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

<div id="field1">field 1
        <button type="button" id="sub" class="sub">-</button>
        <input type="text" id="1" value="0" class="field" />
        <button type="button" id="add" class="add">+</button>
    </div>
    <div id="field2">field 2
        <button type="button" id="sub2" class="sub">-</button>
        <input type="text" id="2" value="0" class="field" />
        <button type="button" id="add2" class="add">+</button>
    </div>
    
    <div id="field2">field 3
        <button type="button" id="sub3" class="sub">-</button>
        <input type="text" id="3" value="0" class="field" />
        <button type="button" id="add3" class="add">+</button>
    </div>
    
    <div id="field2">field 4
        <button type="button" id="sub4" class="sub">-</button>
        <input type="text" id="4" value="0" class="field" />
        <button type="button" id="add4" class="add">+</button>
    </div>