Append div 10 times each time button clicked using javascript

This is my code:

$(document).ready(function () {
          $('<button class="btn more">View More</button>')
         .appendTo(".listing-item-container")
         .click(function() {
            $(this).closest(".listing-item-container").removeClass("collapsed");
          });
          $('<button class="btn less">View Less</button>')
         .appendTo(".listing-item-container")
         .click(function() {
           $(this).closest(".listing-item-container").addClass("collapsed");
         });
      });

.listing-item-container.collapsed > :nth-of-type(n+3) {
      display:none;
    }
    
    .listing-item-container > .more {
      display:none;
    }
    .listing-item-container > .less {
      display:block;
    }
    
    .listing-item-container.collapsed > .more {
      display:block;
    }
    .listing-item-container.collapsed > .less {
      display:none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing-item-container collapsed">
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div><div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <div class="listing-item">
            <p>FEATURES</p>
            <ul class="no-list-style">
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
                <li>list content</li>
            </ul>
        </div>
        <!--  100 more listing-item divs present here   -->
    </div>

In above code when I click view more, it will display all remaining ‘listing item’ div and when I click view less, all divs are collapsed and display only 2 divs.

My expected output is, when I click view more it should only display next 2 ‘listing item’ div and view more button. Again If I click view more, it should display next 2 ‘listing item’ div and view more button. This should continue for all 100 more ‘listing item’ div. In the end it should display view less button. When I click view less button, each time it should collapse last 2 ‘listing item’ div.

How can I modify my code to get the expected output?