How to make slideToggle () text under images without moving them?

Question

I have 3 images in a table and 3 images in another table. I want to add a button under each image, and when you click the button, it will show some text ("info about img"). I did this, but the problem is that when I focus on one button, all other images move down and the image above the button remains fixed. If I aim at all the buttons by giving them the same class name, all the images remain fixed as I want, but it displays the text for all the images when I click the button, it does not matter which one I find in the course.

/ * This is HTML * /

<div class="span">
<table>
    <tr>
        <td>
            <div class="imgContainer">
                <div>
                    <img src="images/pinkknitwear.jpg" alt="Pink knitwear" 
                title="Pink Knitwear">
                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
        <td>

            <div class="imgContainer">
                <div>
                    <img src="images/greenknitwear.jpg" alt="Green Knitwear" 
                title="Green Knitwear">
                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
        <td>
            <div class="imgContainer">
                <div>
                    <img src="images/redknitwear.jpg" alt="Red Knitwear" 
                title="Red Knitwear">

                </div>
                <div class="imgButton">
                    <button value="button">ADD TO CART</button>
                </div>
                <div class="btn-cont">
                    <button class="info-btn">DETAILS</button>
                    <ul class="info1">Super nice!</ul>
                </div>
            </div>
        </td>
    </tr>
 </table>

/ THIS AREA /

$(document).ready(function() {
$(".span").on('click', 'button', function() {
    $(this).closest('.span').find('.info1').slideToggle();

});
});

/ This is CSS /

.info1 {display: none;}


.btn-cont button{

 background-color: white; 
 border: 1px solid dimgrey;
 color: black;
 padding: 7px 10px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 flex-direction: row;

}

 .btn-cont button:hover {
 background: gainsboro;
 text-decoration: none;
 cursor: pointer;
 }

 .btn-cont {margin-top: 10px;}

Example Example

Answer 1

, :

$(this).next().slideToggle();

, .

jsFiddle

Answer 2

js :

$(document).ready(function() {
    $(".span").on('click', 'button', function() {
        $(this).parents('.imgContainer').find('.info1').slideToggle();
    });
});