مشکل با جی کوئری لطفا راهنمایی کنید

[unid_user 63]

سلام و درود

دوستان گرامی، تصویر زیر رو به این صورت کد نویسی کردم که برای هر کدام از محصولات یه تگ a قرار دادم و به هر تگ a یه id خاص اختصاص دادم. با جی کوئری اومدم گفتم که هر وقت روی اولین محصول کلیک شد تصویر و متنی که مربوط اون هست رو نمایش بده. مثلا گفتم که تگ img با آی دی img-1 و تگ P با آی دی P-1 مربوط به محصول یک هستند.

اما به صورت زیر  کدها رو نوشتم و میدونم توی داینامیک کردن به مشکل می خورم می خوام بدونم روش بهتری وجود داره؟

<div class="img-box">
	<img id="img-1" src="image/x1.jpg" alt="تصویر محصول یک">
	<img id="img-2" src="image/x2.jpg" alt="تصویر محصول دو">
	<img id="img-3" src="image/x3.jpg" alt="تصویر محصول سه">
</div>

<div class="p-box">
  <p id="p-1">متن محصول یک</p>
  <p id="p-2">متن محصول دو</p>
  <p id="p-2">متن محصول سه</p>
</div>

<div class="products">
  <a id="a-1" href="#">محصول یک</a>
  <a id="a-2" href="#">محصول یک</a>
  <a id="a-3" href="#">محصول یک</a>
</div>

کدهای جی کوئری

$("#a-1").hover(function() {
  $('#img-1').fadeIn('400');
  $('#p-1').fadeIn('400');
}, function() {
  $('#img-1').fadeOut('300');
  $('#p-1').fadeOut('300');
});
$("#a-2").hover(function() {
  $('#img-2').fadeIn('400');
  $('#p-2').fadeIn('400');
}, function() {
  $('#img-2').fadeOut('300');
  $('#p-2').fadeOut('300');
});
$("#a-3").hover(function() {
  $('#img-3').fadeIn('400');
  $('#p-3').fadeIn('400');
}, function() {
  $('#img-3').fadeOut('300');
  $('#p-3').fadeOut('300');
});

با تشکر و سپاس