Help in remaking the code on the widget

Question

The challenge is that I have checkboxes on the page. This code finds all the checkboxes on the page and if the checkbox is selected, it adds it to a separate block. I want to limit the amount that can be added to this block to 4x. And the idea is that if implement a counter in the widget, what will increase with each addition and decrease when the checkbox is removed, then I can control this process. Please help with this task.

<script>
    require([
        'jquery'
    ], function ($) {
        'use strict';
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                $(".selected-items").append(($(this).closest(".sample-item-wrapper").clone()))
            }
            else if($(this).prop("checked") == false){
                var selected_item = $(this).closest(".sample-item-wrapper").attr('data-sample-id');
                $("div.selected-items div[data-sample-id='"+selected_item+"']").remove()
            }
        });
    });
</script>

Update

---

item:

<div data-sample-id="sample-2" class="sample-item-wrapper">
    <img src="<?php echo $this->getViewFileUrl('Dv_BuildingBedPage::images/image3.png'); ?>" />
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label></label>
        </div>
    </div>
</div>

selected items block:

<div class="selected-items-wrapper">
    <h4>Selected Samples</h4>
    <div class="selected-items"></div>
</div>

Answer 1

I have limited the checkbox count to 4. It will not append 5th checkbox. But still you can check those checkbox

<script>
    require([
        'jquery'
    ], function ($) {
        'use strict';
        $('input[type="checkbox"]').click(function(){
            if($(this).prop("checked") == true){
                if($('.selected-items .sample-item-wrapper').length < 4){
                    $(".selected-items").append(($(this).closest(".sample-item-wrapper").clone()))
                }
            }
            else if($(this).prop("checked") == false){
                var selected_item = $(this).closest(".sample-item-wrapper").attr('data-sample-id');
                $("div.selected-items div[data-sample-id='"+selected_item+"']").remove()
            }
        });
    });
</script>

Answer 2

This is more question from js.

You can try this:

 <script>
require([
  'jquery'
], function($) {
  'use strict';

  function updateCounter() {
    var len = $(".sample-item-wrapper input[name='YourCheckboesxName[]']:checked").length;
    if (len > 0) {
      $("#YourDivWithNumber i .counter").text('(' + len + ')');
    } else {
      $("#YourDivWithNumber i .counter").text(' ');
    }
  }
});
</script>