I have a slight problem.
I have multiple divs with the same id, what i want to do is when i hover over the div it will expand in height. but i have the problem when it does, it pushes the other divs below it down.

So i thought of a solution with jquery, if i could calculate the position of the current element when i hover over it then i could use those values and change the div to position: absolute with those values. and back to the normal state when the mouse leaves. The problem now it only calculates the position of the first div in the markup when i hover over it. and when i hover over the others it doesnt calculate.

I dont want to number the divs with different Id/classes because it will be an automated system with new divs being added etc.

maybe it can be done in another way? im pretty new to jquery so this is what i came up with.

Wall of text sorry D: any help is appreciated!

Markup `

<div id="content-element">
        <div class="element-container">
            <div class="top-info">
                <img src="phone-placeholder.png" alt="placeholder" width="65px" height="58px"/>
                <div class="bg-circle"></div>
                <h3>eerste maand</h3>
                <span><h4>€12.5</h4></span>
                <h3>Daarna</h3>
                <span><h4>€12.5</h4></span>
            </div>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
            <p>Telefoon abonemment met Telefoon</p>
            <p><span>100</span> Bel & SMS <span>500mb</span></p>
            <p><span> Jr</span> telefoon abonnement</p>
            <p>Prijs Telefoon: <span>Gratis</span></p>
        </div>
    </div><!-- end content-element-->
</div><!-- end content-container -->`

jQuery

$('#content-element').mouseenter(function () {
        var $positionTop =  $(this).children('.element-container').position().top;
        var $positionLeft = $(this).children('.element-container').position().left;
        console.log($positionTop);
        console.log($positionLeft);
});
$('#content-element').mouseleave(function () {
        var $positionTop =  $(this).children('.element-container').position().top;
        var $positionLeft = $(this).children('.element-container').position().left;
        console.log($positionTop);
        console.log($positionLeft);
});

Use CSS and set position: absolute; on the div's

#yourDIVid {

position: absolute;