JSFiddle - React, Tailwind, and code Playground

HTML

<section class="big">
            <ul>
            	<li><img src="images/btn-droite.png" alt="test" width="25" /> <hr/>
                    <p>blabla</p>
                </li>
                <li><img src="images/btn-droite.png" alt="test" width="25" /> <hr/>
                    <p>blabla</p>
                </li>
            </ul>

            <div id="photo">
            	<img src="images/test.png" alt="test"  height="250" />
                <div id="cache">
                
                </div>
            </div>
</section>
<div class="nbHr"></div>

CSS

.big li p {
    display: none;
}
.nbHr {
    background-color: #0f0;
}

JavaScript

var nbePara;
$('.big li').click(function(){		
    var $iImg = $(this).find('img');
    var $iHr = $(this).find('hr');
    var $iTexte = $(this).find('p');
    $iImg.add($iHr).addClass('ml285').animate({
        marginLeft: "285px",
    }, 1000)
    $($iTexte).show(1000);
    
    nbePara = $('hr.ml285').length;
    $('.nbHr').html(nbePara)
});