title: Get results and fade
body: <p>Don't know what is wrong, I've tried everything. The code should take simple info from PHP file and for each should fade in delay and out. I was successful with getting all the data at once but it is not good.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $('button').fadeOut('slow')
      var progressBar = $('.progress-bar');
      var percentVal = 0;
      window.setInterval(function(){
          percentVal += 10;
          progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
          if (percentVal == 100)
          {
              percentVal = 0;
          }
      }, 500);
  
      $(document).ready(function() {
  
          $("button").click(function() {                
  
              $.ajax({    //create an ajax request to load_page.php
                  type: "GET",
                  url: "submit.php",
                  data: 'html',   //expect html to be returned                
                  success: function(data){ 
                      for(var i=0;i&lt;6;i++){
                          $('.input-group').html(data).fadeIn(500).delay(1000).fadeOut(500);
                      }
  
                  }
              });
  
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>PHP CODE:</p>
  
  <pre><code>$array= ['apple','orange','grapes','avocado','banana'];
  $indexedOnly = array();
  
  foreach ($array as $row) {
      $indexedOnly[] = array_values($row);
  }
  
  echo json_encode($indexedOnly);
  </code></pre>