问如何让jQuery索引列表项以正确的方式排序

EN

$(function codeAddress() {
  $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html());
  window.onload = codeAddress;

  $('a').click(function() {
    $('.posts-box').html($('.hidden-posts ul li div article:eq(' + $('.test-titles ul li div').index($(this).parent()) + ')').html());
  });
});

.hidden {
  display: none;
}

.site-main {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.half {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="site-main">
  <div class="half test-titles">
    <ul>
      <li>
        <div>
          <a href="#" title="Test post Two">Test post Three</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Test post Two">Test post Two</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Test post one">Test post one</a>
        </div>
      </li>
      <li>
        <div>
          <a href="#" title="Hello world!">Hello world!</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="hidden hidden-posts">
    <ul>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Hello world!</h2>
            </header>
            <div class="entry-content">
              <p>Ugh four dollar toast cray authentic single-origin coffee brooklyn put a bird on it, intelligentsia hashtag vaporware lumbersexual yuccie occupy. Church-key man bun biodiesel, shaman disrupt single-origin coffee meggings lyft leggings. Listicle
                street art tumblr twee heirloom, scenester whatever master cleanse viral la croix umami pickled typewriter affogato. Vaporware celiac fanny pack</p>
            </div>
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post one</h2>
            </header>
            <div class="entry-content">
              <p>Direct trade YOLO chia art party authentic, tumeric pok pok vinyl iPhone +1 palo santo. Jean shorts pop-up banjo freegan, thundercats chambray mumblecore heirloom. Seitan 8-bit yr.</p>
            </div>
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post Two</h2>
            </header>
            <div class="entry-content">
              <p>Put a bird on it tousled you probably haven&#8217;t heard of them intelligentsia affogato chia health goth. Taiyaki kickstarter pinterest, twee distillery listicle chartreuse gentrify iPhone literally photo booth leggings kale chips.</p>
            </div>
            <!-- .entry-content -->
          </article>
        </div>
      </li>
      <li>
        <div>
          <article>
            <header class="entry-header">
              <h2>Test post Three</h2>
            </header>
            <div class="entry-content">
              <p>Tbh sriracha ramps taiyaki YOLO seitan hoodie farm-to-table cornhole waistcoat beard dreamcatcher godard affogato. Air plant stumptown you probably haven&#8217;t heard of them</p>
            </div>
            <!-- .entry-content -->
          </article>
        </div>
      </li>
    </ul>
  </div>
  <div class="half">
    <article class="posts-box">
    </article>
  </div>