Checkbox select = the name is display from the ajax to the div?

Question

I meet some trouble on how can i display the name call from ajax when checkbox is selected ?

This is image below where my ajax is call to create a checkbox for each of them

Now i would like that when i select any checkbox given the name will be display below the Selected: and if i unselect the checkbox the name will disappear how can i do it as i am using ajax to call ?

Here my html code

                                <div class="container-body ">
                                <fieldset class="Field">
                                <ul id="checkbox" class="checkbox">
                                </fieldset>
                                </ul>
                                <div id="no-recyclable-records" >
                                    <h4>No Recyclable Records Found</h4>
                                </div>
                            </div>

                        <div class="Select">
                        <p>Selected:</p>
                        <div id="divfilter"></div>
                        </div>

This is my ajax code that i am using to create my checkbox:

$.ajax( {
            url: 'https://ecoexchange.dscloud.me:8090/api/get',
            type: 'GET',
            dataType: 'json',
            headers:{
                query: "RecyclableGet(0)",
                // Gets the apikey from the sessionStorage
                apikey: sessionStorage.getItem("apikey")
            },
            success: function(data) {
            //console.log(data);
            var html='';
            $.each(data, function(key, value) {
                var type = value.RecyclableType
                //console.log(type)
                html +='<li data-type="'+ type + '"><input type="checkbox" name="recyclable_id[]" value="'+value.RecyclableID+'"><label style="padding-left: 10px;">'+value.Name+'</label><br></li>';
                //console.log(value)
            });
            $('#checkbox').html(html);
            // Toggled it to success after loading all of the checkboxes
            // This will hide the "No Recyclable Records" portion
            toggleRecord("success");



            }
        });

I try to use a javascript but no name is display

// find and retrieve all <input> elements of
    // 'type=checkbox':
    var checkboxes = $('input[type=checkbox]');

    // use the on() method to bind the anonymous function
    // as the event-handler of the 'change' event:
    checkboxes.on('change', function(){

    // update the '#divfilter' element's text:
    $('#divfilter').text(function(){

        // we return the following as the new text:

        // first we filter the checkboxes collection to
        // retain only those that match the ':checked'
        // pseudo-class, and then create a map:
        return checkboxes.filter(':checked').map(function(){

        // the contents of the map are comprised of
        // the 'name' property of each checked check-box:
        return value.Name;
        //return this.name;

        // we convert the map() into an Array, using get():
        }).get()

        // and join the Array elements together with the
        // supplied String, and finished with a period:
        .join(', ') + '.';
    });
    });

Answer 1

As I'm not a user of jQuery I cannot adequately suggest the means to do this with jQuery but the following, using vanilla javascript, might give an idea how you can display the name/value of any selected checkbox from those found on the page.

const changehandler = function(e) {
  let div=document.getElementById('divfilter');
      div.textContent='';

  let col = document.querySelectorAll('input[type="checkbox"]:checked');
  let text = [...col].map(n => [n.parentNode.dataset.type,n.value].join('=')).join(',');

  if (text != '') {
    div.textContent=text;
  }
};


document.querySelectorAll('input[type="checkbox"]').forEach(n => n.addEventListener('change', changehandler))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='divfilter'></div>


<ul>
  <li data-type="Banana">
    <input type="checkbox" name="recyclable_id[]" value="yellow" />
    <label>Banana</label>
    <br>
  </li>

  <li data-type="Apple">
    <input type="checkbox" name="recyclable_id[]" value="Green" />
    <label>Apple</label>
    <br>
  </li>

  <li data-type="Cherry">
    <input type="checkbox" name="recyclable_id[]" value="Red" />
    <label>Cherry</label>
    <br>
  </li>
</ul>