jquery — добавление элемента кладки из цикла php for

Здравствуйте, я начинающий разработчик, и я не уверен, что то, что я должен сделать, на самом деле возможно.

Я создал галерею кладки. При нажатии на изображение под изображением появляется описание.

После того, как галерея работала, я решил перебрать картинки, чтобы «очистить код», но теперь я застрял.

Я хотел бы добавить абзац, класс которого соответствует классу изображения … Это возможно?

  <div class="grid">
<?php for ($i=1; $i < 5; $i++){ echo "<div class='grid-item $i'><img src='img/classic-$i.png' class='img-responsive'><p class='description hidden $i'></p></div>";
} ?>

<p class="description hidden 1">Content description 1</p>
<p class="description hidden 2">Content description 2</p>
<p class="description hidden 3">Content description 3</p>

JS

$(document).ready(function () {

var $container = $('#products-content');

$container.masonry({
gutter: 0,
itemSelector: '.grid-item',
columnWidth: '.grid-item',

});

var $item = $('.grid-item');

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

$(this).children().removeClass('hidden');
$container.masonry();

})