How can I change a Bootstrap list group on change of another?

Question

I have 2 list groups. The second is based off json data and filtered(2 if statements in the code)

This fiddle https://jsfiddle.net/andernathan/fL3cwoa2/32/ is a very simplified version of what I'm trying to do.

when you click on "Howdy" the second list shows "Howdy there" and "Howdy they're". When you click on "Howdee", I would like the second list to show just "Howdy their" (my second "if" statement)

Thanks...as always!

const activities1 = [];
const activities2 = [];

var json = {
  "Tasks": [{
    "Subject": "Howdy their"
  }, {
    "Subject": "Howdy there"
  }, {
    "Subject": "Howdy they're"
  }]
}

var obj = json.Tasks;

for (var i = 0; i < obj.length; i++) {
  activitySub = (obj[i].Subject);

  if (activitySub != "Howdy their") {
    activities1.push({
      activitySub,
    })
  }
  if (activitySub === "Howdy their") {
    activities2.push({
      activitySub,
    })
  }
}
console.log(JSON.parse(JSON.stringify(activities1)));
console.log(JSON.parse(JSON.stringify(activities2)));

const html = activities1.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{sub}', obj.activitySub);
  return item;
});

document.querySelector('#list').innerHTML = html.join('');

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

<ul class="list-group">
  <div id="list"></div>
  <template id="template">
       <h5 class="media-heading">{sub}</h5>
      </template>
</ul>

Answer 1

Hm, perhaps I got carried away and made this too complicated, but perhaps this more generic approach helps.

You could start with this markup

<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>

And do this in 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);