Selectively adding and removing values of same CSS property

What you need to do is basically concatenate the values into a comma-separated string as you update them, instead of just whatever the input value is. You could write your own function to do this if you wanted to. It would have to include logic for whether there is only one value or multiple values in order to make sure you don't end up with a trailing comma for no reason. However, there's an easier way: if we store the values in an array, we can use Array.join(), which will automagically handle that logic for us.

Array.join() joins all the elements in an array into one big string, and it takes an optional parameter that specifies how to join them. So we can do like so:

['one', 'two', 'three'].join(', '); // => 'one, two, three'

Note how there's not an extra comma and space at the end.

So now that we know how to get the end result, we just need to work on getting the values. You will need to either add elements to the array or remove them based on how you interact with the dropdowns. Since you only have two items in each dropdown right now, that logic can be pretty simple. If you are going to have multiple items in any dropdowns, the overall approach is the same, but you'll have to tweak the if…else part in the snippet below.

Keep in mind that, if you want to remove an item from the array, you need to know what to remove. But that's the old value. If you run $(myInput).val() inside your .change() function, you're going to get the current value. So you need to keep track of the old values separately.

Once you have the new array set up, you just have to apply the Array.join() magic and then you have your string that you can use in the jQuery .css() function.

It will be much easier to maintain this if you cut out as much repeated logic as possible and just have one single function that the inputs can each call. So I've done that for you below. You can add more inputs to the .each() function by chaining on more .add()s before it, if you need to.

let oldValues = ['none', 'none']; // whatever the default values are for each select
let currentValue = [];

const getNewValue = input => {
  const val = $(input).val();
  const index = input.index();
  const oldValue = oldValues[index];
  if (val !== 'none') {
    currentValue.push(val);
  } else {
    const indexOfValue = currentValue.indexOf(oldValue);
    currentValue.splice(indexOfValue, 1);
  }
  oldValues[index] = val;
  const newCssValue = currentValue.join(', ');
  console.clear();
  console.log(`new value is "${newCssValue}"`);
  return newCssValue;
};

$(function() {
  const $fontTester = $('.font-tester');
  $('#tester-figures').add('#tester-smcp').each(function() {
    const $this = $(this);
    $this.change(function() {
      const newCssValue = getNewValue($this);
      $fontTester.css('font-feature-settings', newCssValue);
    });
  });
});

.font-tester {
  color: #000;
  line-height: normal;
  width: 100%;
  word-wrap: break-word;
  padding-top: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tester-container">
  <select id="tester-figures">
    <option value="none" selected>Default</option>
    <option value="'frac' 1">Fractions</option>
  </select>
  <select id="tester-smcp">
    <option value="none" selected>Default</option>
    <option value="'smcp' 1">Small caps</option>
  </select>
  <div class="font-tester" contenteditable="true" spellcheck="false" style="font-family: 'EB Garamond', serif; font-size:65pt;">
    abc 123
  </div>
</div>