Javascript 具有加载更多功能的时间轴

我已经创建了一个CSS和HTML时间轴部分，但是因为我是如此的新手，所以我请求您帮助我创建load more按钮，它开始显示3 div，然后每次单击按钮show 3，这是我的主要问题。因此，我将向您展示我创建的html，希望您理解我的要求

<!--Timeline Section Start-->
<section class='timeline pt-100 pb-100' data-scroll-index='2'>
  <div class='container'>
    <div class='row'>
      <div class='col'>
        <div class='section-title'>
          <div class='main-title'>
            <h4>My <span>Experience</span></h4>
            <h6>My Recent Experiences</h6>
          </div>

        </div>
      </div>
    </div>
    <div class='row'>
      <div class='main-timeline'>
        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2016 - Mar 2017</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>

        <div class='timeline'>
          <div class='timeline-icon'/>
          <div class='timeline-content'>
            <span class='date'>Apr 2017 - Present</span>
            <h5 class='title'>Any Title here</h5>
            <p class='description'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis felis vitae risus pulvinar tincidunt. Nam ac venenatis enim. Aenean hendrerit justo sed.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Timeline Section End-->   

我的经验
我最近的经历
2016年4月至2017年3月
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

2016年4月至2017年3月
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

2016年4月至2017年3月
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

2016年4月至2017年3月
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

2016年4月至2017年3月
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

2017年4月至今
这里有头衔吗

Lorem ipsum dolor sit amet，是一位杰出的献身者。猫前庭枕叶顶顶。南ac威尼斯人埃尼姆。埃尼安·亨德雷利特刚刚去世。

首先，主时间线div中的时间线标记没有结束标记。为使下面的脚本正常工作，请放置一个结束标记

将此Jquery cdn粘贴到标题中

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

---

注意：display_timeline变量不能大于您的timeline div长度。“加载更多”按钮将不会显示那些大于的元素。

我可以将btn html放在哪里，您介意给我完整的示例吗？或者，您是否介意在JSFIDLE上显示的实时演示。请耐心点，请检查一下

<style type="text/css">
      .main-timeline > .timeline {
        display: none;
      }
</style>

$(document).ready(function() {
        var display_timeline = 3
        $('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); // show the first 3 timeline tag.

        $('#load-btn').click(function() { // add one timeline tag every click of load button, you can change it to 3
            display_timeline =  display_timeline + 1
            $('.main-timeline > .timeline').eq(display_timeline).css('display', 'block'); 
        });
 });