Highlight color selection

I am looking for a solution with this jquery script which is set to highlight color on the table using the form below. Default color is green, and I can pick the color I want by clicking the color button. This code works only on inputs with class="selector". I wanted this function to work for inputs with class="all" too, so I duplicated the code and changed $('.selector') to => $('.all') in the second copy. but I couldn't get the result I wanted, the code doesn't work for class="all" selection. Instead it highlights all data on the table. Only the form elements should be highlighted. Fiddle: https://jsfiddle.net/5z7zbaq2/ I would appreciate some help to fix this problem. Thanks.

$(function () {
  $('.selector').on('click', function(e) {
    var checked = this.name;
    var selectedColor = '';

    if (this.checked) {
      selectedColor = $('#nextColor').val();

      }
    $('td').filter(function() {
      return this.textContent == checked;
    }).css('background-color', selectedColor);
  });
 
  $('.all').on('click', function(e) {
    var checked = this.name;
    var selectedColor = '';

    if (this.checked) {
      selectedColor = $('#nextColor').val();

      }
    $('td').css('background-color', selectedColor);
  });
});

Code (JavaScript):

 

Because you're not filtering the background-color elements in your .all-selector. Look at how it's done in the previous function. Also, if you don't want to filter on table cells, but form elements, you might wanna match on the form elements and color the parent (the td) of those.

 

Thanks, but I don't know how to do necessary changes.