title: Javascript function with async callback doesn't change dom inside loop
body: <p>I have a function which needs to be run 197 times.I used a simple for loop to iterate it.</p>
  
  <pre><code>for(var m=0;m&lt;198;++m) {
       console.log($('#riddle').attr('index')+" "+$('#riddle').attr('word'));
       submitN();     
  }
  </code></pre>
  
  <p>For each iteration this should print the Index and Word attribute of Id=riddle and then execute the submitN function which changes the Index and Word attribute.</p>
  
  <p>However The function executes only once.</p>
  
  <p>This is what I get-
   <a href="https://i.stack.imgur.com/NYoyo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NYoyo.png" alt="enter image description here"></a></p>
  
  <p>If I execute the submitN seperately function without loop for 197 times , it works fine</p>
  
  <p><a href="https://i.stack.imgur.com/yPEXq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yPEXq.png" alt="enter image description here"></a></p>
  
  <p>Pressing the key 197 times is a very inefficient, I would like some help to make it run with the loop.</p>
  
  <p>EDIT</p>
  
  <p>submitN function</p>
  
  <pre><code>function submitN() {
      var i_val = $('#riddle').attr('next');
      req_n = sendData(JSON.stringify({'i':i_val}),'/clue');
      req_n.done(munchClues);
      req_n.fail(clueFail);
  }
  </code></pre>