jQuery 特定の要素を選択したい

ポートフォリオのWorks欄（成果物紹介）のところで、画像のキャプションを表示させたいです。
ですが、jQueryでキャプション背景用のdiv要素を追加して、そのdiv要素を操作しようとすると、
Works欄以外のセクション（AboutだったりContact）も<div class="container"> </div>で囲っている為、
そのdivたちも反応してしまい、うまく動作しないです。
ｊQueryで特定のdivに対して操作できないと試行錯誤したのですが、よく分からなかったので、
解決策がありましたらアドバイスの方よろしくお願い致します。

HTML
1 <!-- works -->
2    <section class="works" id="works">
3      <div class="container">
4        <h1 class="section-title">WORKS</h1>
5        <h2 class="section-subtitle"><span></span>制作物紹介<span></span></h2>
6
7        <ul class="works-list animationTarget">
8          <li class="works-item">
9            <img src="img/cresta_top.png" alt="模写コーディング">
10          </li>
11          <li class="works-item">
12            <img src="img/isara_top.png" alt="模写コーディング">
13          </li>
14          <li class="works-item">
15            <img src="" alt="模写コーディング">
16          </li>
17          <li class="works-item">
18            <img src="" alt="作品の画像です">
19          </li>
20          <li class="works-item">
21            <img src="" alt="作品の画像です">
22          </li>
23          <li class="works-item">
24            <img src="" alt="作品の画像です">
25          </li>
26        </ul>
27      </div>
28    </section>
29    <!-- //works -->

SCSS
1/* ========= works ========= */
2.works {
3
4  &-list {
5    opacity: 0;
6    transition: 1s;
7    transform: translateY(50px);
8    display: flex;
9    justify-content: space-between;
10    align-items: center;
11    flex-wrap: wrap;
12
13    &.show {
14      opacity: 1;
15      transform: none;
16    }
17  }
18
19  &-item {
20    position: relative;
21    width: calc(85%/3);
22    height: 200px;
23    margin-bottom: 50px;
24    color: #ffffff;
25
26    img {
27      display: block;
28      width: 100%;
29      height: 100%;
30      box-shadow: 8px 8px 8px #555;
31      cursor: pointer;
32      margin-bottom: 20px;
33    }
34  }
35
36  div {
37    position:absolute;
38    display:none;
39    width:100%;
40    height:100%;
41    padding:20px;
42    background:rgba(17, 179, 179, .7);
43    top:0;
44    left:0;
45  }
46
47  p {
48    position: absolute;
49    top: 50%;
50    left: 50%;
51    transform: translate(-50% ,-50%);
52  }
53}

jQuery
1$(function () {
2  // li要素の最後にdiv要素を追加
3  $(".works-item").append("<div></div>");
4
5  // div要素内に画像のキャプションを追加
6  $("div").each(function () {
7    $(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
8  });
9
10  // li要素をマウスオーバー
11  $("li").on('hover', function () {
12    // キャプション部分の表示：フェードイン
13    $(this).children("div").stop().fadeIn(300);
14
15    // キャプションのテキスト位置：10pxから0pxへ移動
16    $(this).children("div").children("p").stop().animate({
17      "top": 0
18    }, 300);
19  }, function () {
20    // キャプション部分の非表示：フェードアウト
21    $(this).children("div").stop().fadeOut(300);
22
23    // キャプションのテキスト位置：0pxから10pxへ移動
24    $(this).children("div").children("p").stop().animate({
25      "top": "10px"
26    }, 300);
27  });
28});