Get PHP variables via JavaScript without reloading page

Assuming that the PHP variable $ reference="F014, F013, F015", this should be the code you are looking for (you can not execute here because it has PHP ...):

    $('a').on('click',function(){

        $('#mostra_ref').html($(this).find('.sku').html());

    });

<div class="entry-summary">
    <span id="mostra_ref">F15</span>
</div>
<div class="product-variations">
    <ul class="variations list-unstyled">
        <?php
        $aux = explode(",", $referencia);  
        foreach($aux as $outras_refs) : ?>
        <li>
            <div class="thumbnails">
                <a class="zoom">
                    <div class="sku"><?php echo $outras_refs; ?></div>
                </a>
            </div>
        </li>
        <?php
        endforeach;
        ?>
    </ul>
</div>

I solved by creating an id for each "a" with the $ other_refs variable itself as proposed in the comment. I'd still like another answer that does not apply to the script tag inside the loop, which is a bad practice.

<div class="entry-summary">
    <span id="mostra_ref"><?php echo @$referencia_1  ?></span>
    //primeiro mostra um valor do banco de dados
    //ao clicar em qualquer referência na classe sku imprime a referência correspondente 
</div>
<div class="product-variations">
    <ul class="variations list-unstyled">
        <?php
        $aux = explode(",", $referencia);  
        foreach($aux as $outras_refs) : ?>
        <li>
            <div class="thumbnails">
                <a class="zoom" id="<?php echo$outras_refs; ?>">

                    <script type="text/javascript">

                        $('a').on('click',function(){


                        $( "#<?php echo$outras_refs; ?>" ).click(function() {
                            $( "#mostra_ref" ).html('<?php echo$outras_refs; ?>');
                        });
                    </script>


                    <div class="sku"><?php echo$outras_refs; ?></div>
                    //IMPRIME F014,F013,F015   

                </a>
           </div>
        </li>
        <?php
            endforeach;
        ?>
    </ul>
</div>

Well, there is a solution, maybe it can be considered "gambiarrenta", but that will solve without using any id and no change in PHP ! But, better than that I'll say "how did I detect" such a solution.

Note this section:

                <script type="text/javascript">

                    $('a').on('click',function(){

                    $('#mostra_ref').html('<?php echo $outras_refs; ?>');

                    });
                </script>


                <div class="sku"><?php echo$outras_refs; ?></div>

Note that the content of .html() is the same that exists within div class="sku" , which even is within the a that is clicked, perfect!

So do the following:

Set .on('click' to:

  $('a').on('click',function(){
  var html = $(this).find('.sku').html();

  $('#mostra_ref').html(html);
  });

This will, exactly:

Ao clicar no 'a'.
Seta o 'html' para encontrar o item de classe 'sku' e pegar seu html.
Injeta o HTML do html no item de id 'mostra_ref'.

The complete code:

<div class="entry-summary">
    <span id="mostra_ref"><?php echo @$referencia_1  ?></span>
    //primeiro mostra um valor do banco de dados
    //ao clicar em qualquer referência na classe sku imprime apenas F015 
</div>
<div class="product-variations">
    <ul class="variations list-unstyled">
        <?php
        $aux = explode(",", $referencia);  
        foreach($aux as $outras_refs) : ?>
        <li>
            <div class="thumbnails">
                <a class="zoom">
                    <div class="sku"><?php echo$outras_refs; ?></div>
                    //IMPRIME F014,F013,F015   
                </a>
           </div>
        </li>
        <?php
            endforeach;
        ?>
    </ul>
</div>

<script type="text/javascript">
  $('a').on('click',function(){
  var html = $(this).find('.sku').html();

  $('#mostra_ref').html(html);
  });
</script>

This solution is lighter, will save bandwidth and load faster. =) Remember: if you are declaring two things equal, there is something wrong.

Try this:

  

Remember this DOES NOT REPRESENT YOUR INTREGRALLY CODE. O   Stackoverflow does not process PHP, so this is only one   demo with SAME JAVASCRIPT, with sample data!

  $('a').on('click',function(){
  var html = $(this).find('.sku').html();

  $('#mostra_ref').html(html);
  });

#mostra_ref {
  background-color:#FFFF00;
  }

p {
  
  font-size:10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>Seuslinks:</p><aclass="zoom">
  <div class="sku">F013</div>
</a>
<a class="zoom">
  <div class="sku">F014</div>
</a>
<a class="zoom">
  <div class="sku">F015</div>
</a>
<br>
<p>Seu mostra_ref:</p>
<span id="mostra_ref"></span>

Man, it's easy. I understand you want to use the data both in php and in javascript.

First avoids this loop in the script tag. This is not cool. then you make a foreach to generate a json. depending on the amounts of data you do this on the same html page, inside a div with display: none. Then you can use this json data in php and once it is printed on the html page you can use it in javascript. if the amount of data is too large, make a json file yourself.

I hope to help you.