jquery wont set image src from another image

I have started some blogs using Weebly now I want to do several changes to the blog UI, everything went well until I wanted to do this. I wanted to get the image path from the image inside blog-content and set it on the blog-post-image. In my head, this jquery looks logical, but somewhere error lays.

Few things to care about, I should use each because there are many of the blog posts and I cannot use ids because of the same reason, cannot use the same id multiple times.

HTML:

$('.blog-post-image').each(function() {
  var $me = $(this);
  var blogPostImage = $me.siblings('.blog-content').children('img').attr('src');

  $me.attr('src', blogPostImage);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blog-post-746510653886732592" class="blog-post">
  <div class="blog-header">
    <div class="blog-post-container">
      <h2 class="blog-title">
      </h2>
      <p class="blog-date">
        <span class="date-text">
        15/6/2021
        </span>
      </p>
      <div>

        <img class="blog-post-image" />

      </div>
    </div>
  </div>
  <div class="blog-content">
    <div>
      <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
        <a>
          <img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
        </a>
        <div style="display:block;font-size:90%">
        </div>
      </div>
    </div>

Solution

Two things:

1.) .blog-content is not a sibling of .blog-post-image

2.) .children() only looks one level deep to find the element you are looking for.

What you need to do is traverse upwards to find a sibling of .blog-content and then use the .find() function to do a deep search of the given DOM node to find what you're looking for.

$('.blog-post-image').each(function() {
  var me = $(this);
  var blogPostImage = me.parent().parent().parent().siblings('.blog-content').find('img').attr('src');
  me.attr('src', blogPostImage);
});

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="blog-post-746510653886732592" class="blog-post">
    <div class="blog-header">
      <div class="blog-post-container">
        <h2 class="blog-title">
        </h2>
        <p class="blog-date">
          <span class="date-text">15/6/2021</span>
        </p>
        <div>
          <img class="blog-post-image" />
        </div>
      </div>
    </div>
    <div class="blog-content">
      <div>
        <div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
          <a>
            <img src="/uploads/7/7/9/0/77909082/820610853.jpg" alt="Picture" style="width:100%;max-width:1100px">
          </a>
          <div style="display:block;font-size:90%">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>