Dynamically display list of checked checkboxes values js/jquery

I would like to display dynamically a list of the chosen options using javascript or jQuery when the user changes his options. PS: I'm using Django + Python to generate the options and bootstrap to style them.

Here is my code:

{% for option in options %}
    <div class="input-group" style="margin-bottom: 7px;">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="checks[]" aria-label="Radio button for following text input" class="option_choice" class="ipad_pro" value="{{ option.name }}">
            </div>
        </div>
        <input style="background-color: #fff;" type="text" class="form-control" disabled=True value="{{ option.name }} {{ option.price }}€" aria-label="Text input with radio button">
    </div>
{% endfor %}
<ul id='options_display'></ul>

Here's what I've attempted:

var getChecked= function() {
    var n = $("input:checked");
    var options_display = $("#options_list")
    console.log(n)
    if (n.length != 0) {
            $.each(n, function(index, value) {
            options_display.append("<li>" + value.defaultValue + "</li>")
        });
    }
    else {
        options_display.html("<h3 class'text-center'>No Options</h3>")
    }
};
getChecked()
$( "input[type=checkbox]" ).on( "click", getChecked);

The problem with that is that it doesn't reset the content of the <ul> which means that I get elements twice when I select a new one. Please help me if you know the answer to my problem.