javascript - 一度に1つのli要素に対してクラスを「アクティブ」に設定する

Question

アクティブなボタン グループが 1 つだけで、アイコン チェックが追加されている場合、ボタン グループの作成に苦労しています。

目標は、フォント ピッカーを作成することです。

ここに私のバグのあるjsコードがあります

$(document).on('click', '.fonts-size-container ul li', function(){  
    var $el = $(this);
    $('li').removeClass('active');
      $el.addClass('active');
      $el.append('<i class="icon-check"></i>');
});

html:

<ul>
    <li class="no-edit" data-fontsize="8em">8 em</li>
    <li class="no-edit" data-fontsize="7em">7 em</li>
    <li class="no-edit" data-fontsize="6em">6 em</li>
    <li class="no-edit" data-fontsize="5em">5 em</li>
    <li class="no-edit" data-fontsize="4em">4 em</li>
    <li class="no-edit" data-fontsize="3.5em">3,5 em</li>
    <li class="no-edit" data-fontsize="3em">3 em</li>
</ul>