title: Second ajax result not appending to my div
body: <p>I have 2 ajax request on my function. The second ajax is working properly but the result is not appending to my div. This is my code. Any help would be appreciated.</p>
  
  <pre class="lang-js prettyprint-override"><code>function load_candidates() {
    $.ajax({
      url: 'admin/requests/Get-Positions.php',
      method: 'POST',
      data: {
        id: id
      },
      dataType: 'json',
      success: function(result) {
        var textToInsert = '';
  
        $.each(result, function(key, value) {
          var position_id = value['id'];
          textToInsert += '&lt;div class="card bg-primary text-center"&gt;&lt;div class="card-body"&gt;&lt;h4 class="text-white m-0" id="position"&gt;' + value['position'] + '&lt;/h4&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;div class="row"&gt;';
          $.ajax({
            url: 'admin/requests/Get-Candidate_Per_Position.php',
            method: 'POST',
            data: {
              position_id: position_id
            },
            dataType: 'json',
            success: function(data) {
              $.each(data, function(key, value) {
                textToInsert += '&lt;div class="col-lg-4 col-sm-6 text-center mb-4"&gt;&lt;h3&gt;' + value['name'] + '&lt;/h3&gt;&lt;p&gt;' + value['candidate_number'] + '&lt;/p&gt;&lt;/div&gt;';
              });
            }
          });
          textToInsert += '&lt;/div&gt;';
        });
        $('#candidate_list').append(textToInsert);
      },
      error: function(xhr, status, error) {
        console.log(xhr.responseWithJSON)
      }
    });
  }
  </code></pre>