increment div id with jquery

Question

I have the following code, please notice that Im such a noob How can Increment the number in the div with the jquery script?

        if($res >= 1){
        $i=1;
            while($row = mysqli_fetch_array($qry)){

            echo   "<div class='imgAddCntr'> 
                       <div id='div".$i."' class='contentbox'>      
                        //content here
                       </div>
                       <div id='imgAdd'>
                         <img class='images' alt='CDL Training' src='".$imgLInk.$row['img']."'/>
                       </div>
                     </div>";   
                   $i++;
               }
             } 

Im trying to target the loop above and its div values

    $(document).ready(function() {

       $('#div1').hide();

           $(".images").hover(
                function () {
                  $("#div1").show();
                    },
                 function () {
                  $("#div1").hide();
            });
     });

any help will be appreciated

Answer 1

Use jQuery attribute selector jQuery( "[attribute='value']" )

$(document).ready(function() {
    $('[id^=div]').hide();
    $(".images").hover(function() {
        $(this).closest('div.imgAddCntr').find('[id^=div]').show();
    }, function() {
        $(this).closest('div.imgAddCntr').find('[id^=div]').hide();
    });
});

or simply avoid id and use class instead , it will be the better way to do it

PHP

if ($res >= 1) {
    while ($row = mysqli_fetch_array($qry)) {
        echo "<div class='imgAddCntr'> 
                       <div class='contentbox'>      
                        //content here
                       </div>
                       <div class='imgAdd'>
                         <img class='images' alt='CDL Training' src='".$imgLInk.$row['img']."'/>
                       </div>
                     </div>";
    }
} 

jQuery

$(document).ready(function() {
    $('.contentbox').hide();
    $(".images").hover(function() {
        $(this).closest('div.imgAddCntr').find('.contentbox').show();
    }, function() {
        $(this).closest('div.imgAddCntr').find('.contentbox').hide();
    });
});