嗯，也许我太激动了，把它弄得太复杂了，但也许这种更通用的方法会有所帮助。
你可以从这个标记开始

<ul class="list-group" id="listOne">
  <li class="active">
    <a href="#">
      Howdy
    </a>
  </li>
  <li>
    <a href="#">
      Howdee
    </a>
  </li>
</ul>
<ul class="list-group" id="listTwo"></ul>

用javascript实现

var visibleIndex = 0;

// added a second prop to the object to determine when it should be visible
var json = {"Tasks":[{"subject":"Howdy their", "showOn" : 0},{"subject":"Howdy there", "showOn" : 1},{"subject":"Howdy they're", "showOn" : 1}]}
var taskList = json.Tasks;

// store elements in vars to save queries for subsequent clicks
var listOne = document.getElementById('listOne');
var listTwo = document.getElementById('listTwo');
var listLinks = listOne.querySelectorAll('a');

// click lsitener for list One
// Just do something when index is changed
listLinks.forEach( (link, index) => {
    link.addEventListener('click', () => {
        var clickedIndex = index;
    if (clickedIndex !== visibleIndex) {
        visibleIndex = parseInt(clickedIndex);
        rebuildList();
    }
  })
});

function rebuildList() {
    // set clicked element to active
    listLinks.forEach( (link, index) => {
    if (index === visibleIndex) {
        link.parentElement.classList.add('active');
    } else {
        link.parentElement.classList.remove('active');
    }
  });
  
  // remove all elements from list two
  while( listTwo.firstChild ){
    listTwo.removeChild( listTwo.firstChild );
    }
  
  // add all elements where showOn is equal to visibelIndex
  taskList.forEach( taskObject => {
    if (taskObject.showOn === visibleIndex) {
        addToSecondList(taskObject.subject)
    }
  });
}

// Yeah, we use vanilla javascript to create elements
function addToSecondList(text) {
    var newItem = document.createElement('li');
  newItem.textContent = text;
  listTwo.appendChild(newItem);
}

// initially  build list with visibleIndex 0, perhaps not needed
rebuildList(visibleIndex);