Showing result always in the same div

Question

I have a problem with my jquery, it shows the result always in the same div, I want the result appears in the div where the button is.

<div class="accordion-content" style="display: block;">
    <div class="clearfix"></div>
    <div class="col-lg-6">
        <div class="borda_servico">
            <div class="pdf"><h4>DJI_0027.jpg</h4>
                <form action="javascript:void(0)" method="post" class="reg-formulario">           
                    <input type="hidden" name="i_content" id="i_content" value="1">
                    <input type="hidden" name="id_arquivo" id="id_arquivo" value="56">
                    <div id="form-content_21" style="clear:both;"><button class="baixar_arquivo" id="submit" type="submit"><i class="fa fa-download" aria-hidden="true"></i> Baixar arquivo</button> 
                    </div>
                </form>     
            </div>
            <hr><div class="accordion-content_aba"><h2> quinta, 28 de setembro de 2017</h2></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="borda_servico">
            <div class="pdf"><h4>FOTO20Ondas-perfeitas-sim-isso-e-sinonimo-de-Indonesia-nesta-.jpg</h4>



                <form action="javascript:void(0)" method="post" class="reg-formulario">           
                    <input type="hidden" name="i_content" id="i_content" value="2">

                    <input type="hidden" name="id_arquivo" id="id_arquivo" value="61">
                    <div id="form-content_22" style="clear:both;"><button class="baixar_arquivo" id="submit" type="submit"><i class="fa fa-download" aria-hidden="true"></i> Baixar arquivo</button> 
                    </div>
                </form>             


            </div>
            <hr><div class="accordion-content_aba"><h2> quinta, 28 de setembro de 2017</h2></div>
        </div>

Jquery

$(document).on('submit', '.reg-formulario', function(e){
    e.preventDefault(); 
    $.ajax({
        url: 'ajax_arquivos.php',
        type: 'POST',
        data: $(this).serialize() 
    })
    .done(function(data){
        $('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
            $('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);
        });
    })
    .fail(function(){
        alert('Ajax Submit Failed ...');    
    });
});

I used the serialize() so that I can execute on more than one form, in that part I made it show the result in the div #form-content_2..., but that’s what doesn’t work because it only shows the results of all buttons in the first div:

$('#form-content_2'+$("#i_content").val()).fadeOut('slow', function(){
$('#form-content_2'+$("#i_content").val()).fadeIn('slow').html(data);

Answer 1

In HTML you cannot have duplicate Ids. Each ID must be unique and only exist in 1 element on the whole page.

Other than that, which influences your mistake, you better use the this as a starting point:

$(document).on('submit', '.reg-formulario', function(e) {
  e.preventDefault();

  var i = $(this).find('[name="i_content"]').val();
  var destino = $('#form-content_2' + i);
  destino.fadeOut('slow');

  $.ajax({
      url: 'ajax_arquivos.php',
      type: 'POST',
      data: $(this).serialize()
    })
    .done(function(data) {
      destino.fadeIn('slow').html(data);
    })
    .fail(function() {
      alert('Ajax Submit Failed deletar convidado...');
    });
});