JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:block;margin-botton:4px;">
  <span class="change-name" data-name1="keyname1" data-name2="keyname1alt">keyname1</span> | 
  <span class="hide toggle-title">keytype1</span>
</div>

<div style="display:block;margin-botton:4px;">
  <span class="change-name" data-name1="keyname2" data-name2="keyname1alt">keyname2</span> | 
  <span class="hide toggle-title">keytype2</span>
</div>

<label><input type="checkbox" name="vauChange" value="changename" id="toggle-name-box"> Toggle name</label>
<label><input type="checkbox" name="vauChange" value="hidetitle" id="toggle-title-box"> Hide Title</label>

CSS

.hide {
  display: none;
}

JavaScript

$('#toggle-name-box').click(function() {
      $('.change-name').each(function() {
          cur = $(this).text();
          $(this).text(cur == $(this).data('name1') ? $(this).data('name2') : $(this).data('name1'));
      });
  });
  $('#toggle-title-box').click(function() {
      $('.toggle-title').each(function() {
          $(this).toggleClass('hide');
      });
  });