Error in passing the result of a json array to the html;

I have the following situation, I have a page that gets the name of a city, between São Paulo and Osasco, both the request for the route via Ajax, and the data in json is returning from php to Js, however I have another page called cards.php that should show the weather forecast data on 7 cards. but the time I click the submit button, does not change the screen, and in cards.php does not change the values. I put the cards in the index to see, it receives one of the values, but it disappears very fast, at the time that it receives it passes 2 seconds already disappears and it is empty. On the console, time has an error, but it also appears too fast and you can not see the error.

Project on Github link

index.                                                                                                                                                                         

main.js

$(document).ready(function(){
  $("#enviar").submit(function(e){
   e.preventDefault();
  });

$("#enviar").click(function(){
    var city = $('#city').val();

    $.post("http://localhost:5000/cidade.action.php",
        {city: city}, function(data){
              for(var i = 1; i < data.length; i++){
                // alert(data[i].probability);
                if(data[i].probability)
                {
                    $('#data'+i).html(data[i].probability);
                    break;
                }
            }
    },'json').fail(function(){
        alert("Cidade não encontrada!");
    });
  });
})

cards.php

  <section class="cards container animar_interno">
     <h2 class="subtitulo"></h2>
     <ul class="cards_lista">
        <li class="grid-1-3">
           <div class="cards_icone">
           </div>
           <h3 id="data1"></h3>
           <p id="texto1"></p>
           <p id="maxima1"><img src="img/upload.png" alt="Máxima"></p>
           <p id="minima1"><img src="img/low.png" alt="Minima"></p>
           <p id="precipitacao-chuva1"><img src="img/raindrop-close-up.png" alt="Preciptação de chuva"></p>
           <p id="possibilidade-chuva1"><img src="img/protection-symbol-of-opened-umbrella-silhouette-under-raindrops.png" alt="Chance de chover"></p>
        </li>

</ul>