How to pass an index to the element according to its position?

Question

I am loading data from an external api with json and jquery,every ajax request a div with the item class, a div with the more_info class and a see button plus, which loads the rest of the data, and the created Divs receive the json data. Starting from line 28 jquery hides the div more_info, and the button created with the bt_ver_more class receives the toggle function, to open the rest of the information on the same screen. The problem is that when I click on one of the generated buttons to see more, all the buttons run the toggle function, opening the rest of the information of all the Divs, being obvious, since everyone has the same class, but I don’t want that to happen, I want to click button, He opens the div. more_info of his div, and not of all other Ivs

//Carrega dados de um arquivo json 
var elemento;
  $(document).on('click','#bt_prosseguir', function(){
    $.getJSON('https://upvagasweb.000webhostapp.com/api_upvagas/php_json_access/access_json_aparecida.php', function(result){
        elemento = "<div class='list radius white'>";
        $.each(result, function(i, valor){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src='"+valor.logo_empresa+"'>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>"+valor.setor+"</strong></h2>";
        elemento += "<p style='margin-left:40%;'>"+valor.empresa+"</p>";
        elemento += "<p style='margin-left:40%;'> Por "+valor.vinculo+"</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>"+valor.cidade+" - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>"+valor.beneficios+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>"+valor.remuneracao+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>"+valor.nivel_estagio+"</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>"+valor.processo_seletivo+"</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
        });
        $('#feed_vagas').html(elemento);

        //esconde a div more_info
          $('.more_info').hide();
          $('.bt_ver_mais').click( function(){     
            $('.more_info').toggle(); 
        });
    });
});


/*$(document).on('deviceready', function(){
    load_feed();
 });*/

Answer 1

Change the click event to find only div .more_info who has the same ancestor with the class .item of .bt_ver_mais clicked:

$('.bt_ver_mais').click( function(){
  $(this) // elemento clicado
  .closest('div.item') // ancestral comum
  .find('.more_info') // busca o elemento que será exibido
  .toggle(); // exibe/oculta o elemento
});

Example:

//Carrega dados de um arquivo json 
var elemento;
$(document).on('click','#bt_prosseguir', function(){
     elemento = "<div class='list radius white'>";
     for(var x=0; x<5; x++){
        elemento += "<div class='item'>";
        elemento += "<div class='left'>";
        elemento += "<img class='avatar radius' src=''>";
        elemento += "</div>";
        elemento += "<h2 style='margin-left:40%;'><strong>10,00</strong></h2>";
        elemento += "<p style='margin-left:40%;'>20,00</p>";
        elemento += "<p style='margin-left:40%;'> Por 5,00</p>";
        elemento += "<p class='text-grey-500' style='margin-left:40%;'>SP - SP</p>"; 
        elemento += "<p class='bt_ver_mais' style='margin-left:40%;color:#00f;'>Ver mais</p>";
        elemento += "<div class='more_info'>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Benefícios:</strong>30,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Remuneração</strong>40,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Nível de estágio:</strong>50,00</p>";
        elemento += "<p class='ver_mais' style='margin-left:40%;'><strong>Inscrição:</strong>60,00</p>";
        elemento += "</div>";
        //elemento += "<a href='"+valor.contato+"' class='ver_mais' style='margin-left:40%;'><strong>Link:</strong>"+valor.contato+"</p>";
        elemento += "</div>";   
     }
     $('#feed_vagas').html(elemento);

     //esconde a div more_info
       $('.more_info').hide();
       $('.bt_ver_mais').click( function(){
         $(this)
         .closest("div.item").find(".more_info")
         .toggle();
      });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bt_prosseguir">Prosseguir</button>
<div id="feed_vagas"></div>