Gather some input checkbox values and append them within a paragraph within an each statement with jquery

I created a search bar filter with input checkboxes, so my user can check them and filter some results that I will add later on.

It works as it is expecting to work but I would like to add a feature: the values of my checkboxes will create an array and then, inside an each() function (or a map in plain javascript) I want to loop through the array and return (or just append() or html()) an html element for each element of the array than later on I can also delete.

let targetvalue = [];
$checkedtarget.each(function(index) {
    targetvalue[index] = $(this).val();
    
});
$targetfilter.html('<p>'+targetvalue+'</p>');
console.log(targetvalue);

The only problem is the result because instead of creating a paragraph element containing a value for a certain number of times, I receive a comma-separated value within the same element.

Here's the entire code to play with:

const $targetChecks = $('.target-checks :checkbox');
const $searchFire = $('.search h6');
const $targetForm = $('.target-checks');
const $target = $('#target');
const $domain = $('#domain');
const $targetname = $('#target-name');
const $domainname = $('#domain-name');
const $targetfilter = $('#target-filter');

$target.on("change",function() {
    const $checkedtarget = $target.find(":checked");
    let targetvalue = [];
    $checkedtarget.each(function(index) {
        targetvalue[index] = $(this).val();
        //$targetfilter.html('<p>'+targetvalue+'</p>');
    });
    console.log(targetvalue);

});


$targetChecks.on("click",function() {

    $(this).parents('.absolute').removeClass('show');
    const $checked = $targetForm.find(":checked")
    if ($checked.length === 0) {
        $("div[data-filters]").show();
        return;
    }
    $("div[data-filters]").hide();
    $checked.each(function() {
        const val = $(this).val();
        $(`div[data-filters~=${val}]`).show();
    });

});

$searchFire.click(function() {
    $(this).next().toggleClass('show');
    $(this).toggleClass('active');
})

.blog-block .search {
    background: #fff;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.05);
    padding: 20px;
    margin-bottom: 40px
}

.blog-block .search .col-md-4 {
    position: relative
}

.blog-block .search h6 {
    color: #931648;
    font-weight: 600;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 8px;
    border-bottom: 1px solid #000
}

.blog-block .search h6::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 1rem;
    content: "\f107";
    position: absolute;
    right: 0;
    padding: 0 .3rem;
    color: #000;
    vertical-align: middle;
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out
}

.blog-block .search h6.active::after {
    transform: rotate(-180deg)
}

.blog-block .search .absolute {
    padding: 20px;
    display: none;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.05);
    position: absolute;
    width: 86%;
    background: #fff;
    z-index: 2;
    text-align: left !important
}

.blog-block .search .absolute.show {
    display: block
}

.blog-block .search .absolute form label {
    color: #616161;
    font-weight: 300;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    user-select: none
}

.blog-block .search .absolute form input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.blog-block .search .absolute form input:checked~.checkmark:after {
    display: block
}

.blog-block .search .absolute form .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    border: 2px solid #931648;
    border-radius: 3px
}

.blog-block .search .absolute form .checkmark::after {
    content: "";
    position: absolute;
    display: none
}

.blog-block .search .absolute form .checkmark::after {
    left: 4px;
    top: 1px;
    width: 7px;
    height: 10px;
    border: solid #931648;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blog-block paddingtop-none">
  <div class="container-md search">
    <div class="row">
        <div class="col-md-4">
            <h6 id="target-name" class="h-100">Target audiences</h6>
            <div class="absolute">
                <form class="target-checks" id="target">
                    <label>
                        <input type="checkbox" name="businesses" value="businesses" id="businesses"> Businesses                            <span class="checkmark"></span>
                    </label>
                    <br>
                    <label>
                        <input type="checkbox" name="accounting-firms" value="accounting-firms" id="accounting-firms"> Accounting firms                            <span class="checkmark"></span>
                    </label>
                    <br>
                    <label>
                        <input type="checkbox" name="banks" value="banks" id="banks"> Banks                            <span class="checkmark"></span>
                    </label>
                    <br>
                    <label>
                        <input type="checkbox" name="partners" value="partners" id="partners"> Partners                            <span class="checkmark"></span>
                    </label>
                    <br>
                    <label>
                        <input type="checkbox" name="developers" value="developers" id="developers"> Developers                            <span class="checkmark"></span>
                    </label>
                    <br>

                </form>
            </div>
        </div>

</div>

<div id="filter-result">
    <div class="row">
        <div class="col-md-4">
            <div id="target-filter"></div>
        </div>
        <div class="col-md-4">
            <div id="domain-filter"></div>
        </div>
        <div class="col-md-4">
            <div id="category-filter"></div>
        </div>
    </div>
</div>

I'm not sure what I'm missing because, on my console, there is actually an array.

Any idea?

enter image description here