How to make that when you click on the image in the field, the balance is added every time by $ 1000?

Question

css

I want that when I click on the iPhone image, 1000 is added to the balance field every time, and I only press + 1000 once, then it doesn’t change, help PZhZhZh !!!

the code:

function cr_ea_te_im_g() {
  $('body').append('<img src='+image+ 'width="220px"<img>');
  $('img').addClass('img')
  $('.img').click(function() {
    $( this ).css({'display': 'none'})
    $('#balance').text(+= 1000)
  });
}
balance = 0
$('#balance').text(balance)

<div class="i_m_g_b_tn_aaa cr_ea_te_im_g" onclick='cr_ea_te_im_g()'><p>Create image</p></div>
  <div class='balance'><span>Balance: </span><span id='balance'>0</span><span>$</span></div>

.i_m_g_b_tn_aaa {
  display: inline-block;
  background: rgb(51,51,51,0.1);
  padding: 12px;
  margin-left: 8px;
  margin-top: 8px;
  cursor: pointer;
}
.div {
  width: 100px;
  height: 100px;
  background: rgb(0,0,0,0.5);
  margin-top: 5px;
}
.i_m_g_b_tn_aaa::selection {background: transparent;}
.i_m_g_b_tn_aaa p::selection {background: transparent;}
img {
  margin-top: 20px;
}

.balance {
  display: inline-block;
  background: rgb(51,51,51,0.1);
  padding: 12px;
  margin-left: 338px;
  margin-top: 8px;
  cursor: pointer;
}

Answer 1

Not sure if it will work, but it might

function cr_ea_te_im_g() {
    $('body').append('<img src=' + image + 'width="220px"<img>');
    $('img').addClass('img')
    $('.img').click(function () {
        $(this).css({'display': 'none'})
        $('#balance').text(parseInt($('#balance').text()) + 1000)
    });
}