Javascript: How to I display these elements I clicked?

I must take the data-filter attribute for the clicks, because these are the only differences of the <ul> list and I can’t change the inner HTML of them.

Now it’s working only with “Phone”, but I want that “Phone” disappear when I click e.g. “Tablet”.

var outputText = "";

const conbtn = document.querySelectorAll('li[data-filter=".eael-cf-phone"]', 'li[data-filter=".eael-cf-tablet"]', 'li[data-filter=".eael-cf-Laptop"]', 'li[data-filter=".eael-cf-PC"]');

var output = document.getElementById('output');

for (var i = 0; i < conbtn.length; i++) {
  outputText += conbtn[i].innerText;
};

conbtn.forEach(function(elem) {
  elem.addEventListener("click", function() {
    document.getElementById('output').innerText = outputText;
  });
});
<div class="container">
  <div class="row">
    <div class="col-6">
      <ul>
        <li data-load-more-status="0" data-first-init="1" class="control all-control" data-filter="*">All</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-phone">Phone</li>
        <li data-load-more-status="0" data-first-init="0" class="control active" data-filter=".eael-cf-tablet">Tablet</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-laptop">Laptop</li>
        <li data-load-more-status="0" data-first-init="0" class="control" data-filter=".eael-cf-pc">PC</li>
      </ul>
    </div>

    <div class="col-6">
      <p id="output" style="text-align:center;font-size: 20px;">Output:
      </p>
    </div>
  </div>
</div>

https://jsfiddle.net/8debzkh3/

Answer

Is this what you’re after? Each click shows the content of the item clicked.

const conbtn = document.querySelectorAll('li[data-filter]');
const output = document.getElementById('output');

conbtn.forEach(function(elem) {
    elem.addEventListener("click", function(e) {
        output.innerText = e.target.innerText;
    });
});