コード避難所

[YNSTakeru]

   <div class="relation__child__task popup__text">関連するタスクを登録</div>
                <ul class="child__task__container">
                    <li class="child__task__list__container">
                        <div>子タスク</div>
                        <div class="explanation__evaluation__container">
                            <button class="explanation">説明を表示</button>
                            <button class="evaluation">評価</button>
                        </div>
                    </li>
                    <li class="">子タスク</li>
                </ul>
            <section>
                <ul class="display__progress__character__container">
                <li class="white__btn">0%</li>
                <li class="red__btn">30%</li>
                <li class="yellow__btn">60%</li>
                <li class="blue__btn">80%</li>
                <li class="green__btn">100%</li>
            </ul>

[YNSTakeru]

<div class="button__container">
    <!-- ボタンにデータを仕込む -->

    <button class="btn" data-parent_task_id=1>ボタン</button>
    <div class="popup">
        <div class="parent__task popup__text"></div>
        <div class="child__task__section">
            <div class="popup__text relation__child__task">関連するタスクを登録</div>
            <ul class="child__task__container">
                <li class="child__task__list__container"><div class="popup__text child__task">あああ</div><div class="btn__container"><button class="btn">詳細</button><button class="btn">aaa</button></div>
            </li>
                <li class="popup__text child__task">子タスク</li>
            </ul>
        </div>
        <div></div>
    </div>
    <div class="cover"></div>
</div>

<script>
    const $button = document.querySelector('.btn')
    const $cover = document.querySelector('.cover')
    const $popup = document.querySelector('.popup')

    const $doms = [$popup, $cover]

    $button.addEventListener('click', () => {
        $doms.forEach(dom => {
            dom.classList.toggle('popup__open')
        })
        // dataの取得
        const parentTaskId = $button.dataset.parent_task_id

        const parentTaskName = document.querySelector('.parent__task')
        <?php
            $parentTaskId = '<script>document.write(parentTaskId)</script>';

            $parent_tasks = array_values(array_filter($parent_tasks, function($parent_task) {
                return $parent_task->id === 1;
            }));
         ?>
        parentTaskName.textContent = JSON.parse('<?php echo json_encode($parent_tasks[0]->title);?>')
    })

    $doms.forEach(dom => {
        if(dom === $popup) return
        dom.addEventListener('click', () => {
            $doms.forEach(dom => {
                dom.classList.remove('popup__open')
            })
        })
    })
</script>

ul {
  margin: 0;
  padding: 0;
}

.button__container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  position: relative;

  & .btn {
    display: block;
    width: 60px;
    height: 40px;
  }
}

.popup {
  visibility: hidden;
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  z-index: 1000;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;
  gap: 10px;

  .popup__text {
    -webkit-text-stroke: 1px black;
    text-shadow: 0px 0px 3px black;
    color: white;

    &.parent__task {
      font-size: 32px;
    }

    &.relation__child__task {
      font-size: 24px;
      text-shadow: 0px 0px 0px black;
    }

    &.child__task {
      font-size: 18px;
      text-shadow: 0px 0px 0px black;
      color: white;
    }
  }

  &.popup__open {
    visibility: visible;
    display: flex;
    flex-direction: column;
    opacity: 1;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
    padding: 20px;
    gap: 10px;

    & .child__task__section {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex-wrap: wrap;

      & .child__task__container {
        display: flex;
        gap: 5px;
        flex-direction: column;

        & .child__task__list__container {
          display: flex;
          gap: 3px;
          flex-direction: column;

          & .btn__container {
            display: flex;
            flex-direction: row;
            gap: 5px;

            & .btn {
              display: block;
              width: 60px;
              height: 40px;
            }
        }
      }
    }
  }
}

.cover {
  visibility: hidden;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  transition: opacity ease-in-out 0.2s;

  &.popup__open {
    visibility: visible;
    opacity: 1;
  }
}

[YNSTakeru]

<div class="button__container">
    <!-- ボタンにデータを仕込む -->

    <button class="btn" data-parent_task_id=1>ボタン</button>
    <div class="popup">
        <div class="parent__task popup__text"></div>
        <div class="child__task__section">
            <div class="popup__text relation__child__task">関連するタスクを登録</div>
            <ul class="child__task__container">
                <li class="child__task__list__container"><div class="popup__text child__task">あああ</div><div class="btn__container"><button class="btn">詳細</button><button class="btn">aaa</button></div>
            </li>
                <li class="popup__text child__task">子タスク</li>
            </ul>
        </div>
        <div></div>
    </div>
    <div class="cover"></div>
</div>

<script>
    const $button = document.querySelector('.btn')
    const $cover = document.querySelector('.cover')
    const $popup = document.querySelector('.popup')

    const $doms = [$popup, $cover]

    $button.addEventListener('click', () => {
        $doms.forEach(dom => {
            dom.classList.toggle('popup__open')
        })
        // dataの取得
        const parentTaskId = $button.dataset.parent_task_id

        const parentTaskName = document.querySelector('.parent__task')
        <?php
            $parentTaskId = '<script>document.write(parentTaskId)</script>';

            $parent_tasks = array_values(array_filter($parent_tasks, function($parent_task) {
                return $parent_task->id === 1;
            }));
         ?>
        parentTaskName.textContent = JSON.parse('<?php echo json_encode($parent_tasks[0]->title);?>')
    })

    $doms.forEach(dom => {
        if(dom === $popup) return
        dom.addEventListener('click', () => {
            $doms.forEach(dom => {
                dom.classList.remove('popup__open')
            })
        })
    })
</script>