JS - where is the problem?

Question

JavaScript

Good day!
I figured out the VK Payment API, and now troubles with javascript. I don’t know it at all, but after pressing a certain button and subsequent payment, display the text in a div.
I am using this code:

<div onClick=order1() > 1 </div><div id="a1"></div>
<script type="text/javascript">
  function order1() {
    var params1 = {
      type: "item",
      item: "item1"
    };
    VK.callMethod("showOrderBox", params1);}
 
  var a1 = document.getElementById("a1");
 
  VK.addCallback("onOrderSuccess", function(order_id) {
  a1.innerHTML +="1";
  });
</script>
 
 
<div onClick=order2() > 2 </div><div id="a2"></div>
<script type="text/javascript">
function order2() {
    var params2 = {
      type: "item",
      item: "item2"
    };
    VK.callMethod("showOrderBox", params2);}
 
  var a2 = document.getElementById("a2");
 
  VK.addCallback("onOrderSuccess", function(order_id2) {
  a2.innerHTML +="2";
  });
</script>

The buttons work, but after a successful payment ("a1"), the div "a1" gets not the treasured 1, but 2. With "a2" everything is in order.
Friends, what's the matter?
Thanks in advance!

Answer 1

It's possible that the onOrderSuccess event is being called multiple times.