Как использовать gsub для удаления. в конце строки в рубине?

Прежде всего свойство id должно быть уникальным в DOM, поэтому вы не можете иметь несколько элементов с активным или неактивным идентификатором.

Это основная проблема, поскольку $('#inactive') вернет только первый элемент соответствует (, поскольку он должен быть уникальным ).

Кроме того, флажки имеют свойство checked, которое означает, что они проверены или нет, поэтому весь ваш код может просто проверить, что вместо изменения id все время.

Наконец, вы должны использовать теги label для текста вместо p, чтобы щелчок по тексту также установил / снял флажок.

( oh, флажок .toggler фильтры, а не сортировки, другие )

Поэтому, учитывая все проблемы, вы можете упростить свой код до

$(document).ready(function() {
  $('.toggler').change(function() {
    
    if (this.checked) {
      $('.grouped').parent().hide();
      $('.grouped:checked').parent().show();
    } else {
      $('.grouped').parent().show();
    }
  })
});

label{display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p><label><input type="checkbox" class="toggler">click here to filter</label></p>
<label><input type="checkbox" class="grouped">Hello1</label>
<label><input type="checkbox" class="grouped">Hello2</label>
<label><input type="checkbox" class="grouped">Hello3</label>