Make dynamically generated plus/minus counter work independently?

Question

In this MVC web-app the client is chosen and the user is supposed to input the information for an order on that client. The plus/minus counter is there to choose the quantity of a single product on the order.

The issue is of course that all the counters are working as one. Press one button and all the values change. I also understand why, but i do not understand how to fix it.

//Plus/minus counter script.
<script type="text/javascript">
    $(document).ready(function () {
        $('.count').prop('disabled', true);
        $(document).on('click', '.plus', function () {
            $('.count').val(parseInt($('.count').val()) + 1);
        });
        $(document).on('click', '.minus', function () {
            $('.count').val(parseInt($('.count').val()) - 1);
            if ($('.count').val() == 0) {
                $('.count').val(1);
            }
        });
    });
</script>

@* Template for inserting dropdowns. *@
<script id="template" type="text/template">
    <div class="row-3">
        @Html.DropDownList("fromDBProducts", (IEnumerable<SelectListItem>)ViewData["DBProducts"], "Velg produkt", new { @class = "form-control drop, insert-textbox" })
        @Html.TextBox("Price", null, new { @class = "form-control insert-textbox price-text", @placeholder = "kr" })
        <div class="qty mt-5 counter-div">
            <span class="minus btn-secondary unselectable">-</span>
            @Html.TextBox("count", 1, new { @class = "count qty" })
            <span class="plus btn-secondary unselectable">+</span>
        </div>
        <button type="button" class="btn btn-danger" id="remove-btn"></button>
    </div>

</script>

@* Append and remove product-dropdown *@
<script type="text/javascript">
    $(document).ready(function ($) {
        $('#add-product-btn').on('click', function (e) {
            $('.row-3:last').after($('#template').html());
        });

        $(document).on('click', '#remove-btn', function () {
            $(this).parent('div').remove();
        });
    });
</script>


<div class="card-container">
    <div class="card border-primary mb-3 card-client" style="max-width: 40rem;">
        <div class="card-header">Legg til ordre</div>
        <div class="card-body">
            @using (Html.BeginForm("InsertOrder", "Add", FormMethod.Post))
            {
                <div class="row-3">
                    @Html.DropDownList("fromDBProducts", (IEnumerable<SelectListItem>)ViewData["DBProducts"], "Velg produkt", new { @class = "form-control drop, insert-textbox" })
                    @Html.TextBox("Price", null, new { @class = "form-control insert-textbox price-text", @placeholder = "kr" })
                    <div class="qty mt-5 counter-div">
                        <span class="minus btn-secondary unselectable">-</span>
                        @Html.TextBox("count", 1, new { @class = "count qty" })
                        <span class="plus btn-secondary unselectable">+</span>
                    </div>
                </div>
                <div class="row-4">
                    <button type="button" class="btn btn-outline-secondary" id="add-product-btn"></button>
                </div> 
            }
        </div>
    </div>
</div>

The expected result would be that the counters work independently and not as one.

Answer 1

You can find holder for the elements and use it to find the correct count for that plus or minus.

One way to do that is to use .closest(), but in your structure you can use .parent() or .siblings()

$(document).ready(function () {
                    $('.count').prop('disabled', true);
                    $(document).on('click', '.plus', function () {
                        var count = $(this).closest(".qty").find(".count");
                        // var count = $(this).siblings(".count"); //example with siblings
                        // var count = $(this).parent().find(".count"); //example with parent
                        $(count).val(parseInt($(count).val()) + 1);
                    });
                    $(document).on('click', '.minus', function () {
                        var count = $(this).closest(".qty").find(".count");
                        // var count = $(this).siblings(".count"); //example with siblings
                        // var count = $(this).parent().find(".count"); //example with parent
                        $(count).val(parseInt($(count).val()) - 1);
                        if ($(count).val() == 0) {
                            $(count).val(1);
                        }
                    });
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-3">
            <div class="qty mt-5 counter-div">
                <span class="minus btn-secondary unselectable">-</span>
                <input type="text" value="1" class="count" />
                <span class="plus btn-secondary unselectable">+</span>
            </div>
        </div>

        <div class="row-3">
            <div class="qty mt-5 counter-div">
                <span class="minus btn-secondary unselectable">-</span>
                <input type="text" value="1" class="count" />
                <span class="plus btn-secondary unselectable">+</span>
            </div>
        </div>
        <div class="row-3">
            <div class="qty mt-5 counter-div">
                <span class="minus btn-secondary unselectable">-</span>
                <input type="text" value="1" class="count" />
                <span class="plus btn-secondary unselectable">+</span>
            </div>
        </div>
        <div class="row-3">
            <div class="qty mt-5 counter-div">
                <span class="minus btn-secondary unselectable">-</span>
                <input type="text" value="1" class="count" />
                <span class="plus btn-secondary unselectable">+</span>
            </div>
        </div>