Ultimately, the id’s of your elements need to be unique. Especially so when doing getElementById() calls in JavaScript.

You need to change both your server-side foreach loop and your client-side increaseValue()/decreaseValue() functions.

You need to change them in this way: Assign a unique id in your foreach loop, pass the id as an argument to the increaseValue()/decreaseValue() functions, and then update those functions to use the argument passed. Notice, below, we need an index, which I call {i}, which is used to make your id unique. This needs to be incremented in each iteration of the foreach loop.

So, in your foreach, (special thanks for the code improvement updates to @Sanjay)…

{% for item in order.get_cart_items %}
    ...
        <div class="value-button" id="decrease" onclick="decreaseValue({forloop.counter})" value="Decrease Value">-</div>
        <input type="number" id="{forloop.counter}" value="1" />
        <div class="value-button" id="increase" onclick="increaseValue({forloop.counter})" value="Increase Value">+</div>
    ...
{% endfor %}

The rendered HTML should look like: <input ... id="number1" ... />, <input ... id="number2" ... />, <input ... id="number3" ... />, etc.. Notice, the id properties are unique.

And then, in both your increase/decrease functions, adjust them as follows to accept an argument for id, and then to use that id…

function increaseValue(id) {
      var value = parseInt(document.getElementById(id).value, 10);
      value = isNaN(value) ? 1 : value;
      value++;
      document.getElementById(id).value = value;
}

Make this change for both of your functions. The changes are basically the same for both, so, I’m only listing one.

Now your JavaScript will work on the particular id given to it.

I am trying to increase/decrease the quantity of an item by the input I get from HTML Page. When I try to click on inc/dec button it just increments/decrements my first element within the for loop. For example:
If I have a 1st item input as 1 … now I try to increment the second item through inc button, it changes the 1st item input from 1–>2 making 1st item quantity as 2 and my second items remains unchanged as 1.. same continues if I click on 3rd or 4th item

Here’s part of a code from my html page

{% for item in order.get_cart_items %}
                <tr>
                  <th scope="row" class="border-0">
                    <div class="p-2">
                      <img src="{{item.product.product_img.url}}" alt="" width="70" class="img-fluid rounded shadow-sm">
                      <div class="ml-3 d-inline-block align-middle">
                        <h5 class="mb-0"> <a href="#" class="text-dark d-inline-block align-middle">{{ item.product.name }}</a></h5><span class="text-muted font-weight-normal font-italic d-block">Category: {{ item.product.product_type }}</span>
                      </div>
                    </div>
                  </th>
                  <td class="border-0 align-middle"><strong>Rs.{{ item.product.price}}</strong></td>
                  <td class="border-0 align-middle"><strong><form>
                    <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div>
                    <input type="number" id="number" value="1" />
                    <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div>
                  </form></strong></td>
                  <td class="border-0 align-middle"><a href="{% url 'delete-item' item.id %}" class="text-dark"><i class="fa fa-trash"></i></a></td>               
                </tr>
{% endfor %}
.
.
.
<script>
                  function increaseValue() {
                  var value = parseInt(document.getElementById('number').value, 10);
                  value = isNaN(value) ? 1 : value;
                  value++;
                  document.getElementById('number').value = value;
                }

                function decreaseValue() {
                  var value = parseInt(document.getElementById('number').value, 10);
                  value = isNaN(value) ? 1 : value;
                  value < 2 ? value = 2 : '';
                  value--;
                  document.getElementById('number').value = value;
                }
</script>