JSFiddle - React, Tailwind, and code Playground

HTML

<div id="list">
    <span class="item">Value 1</span><span class="delim">, </span>
    <span class="item">Value 2</span><span class="delim">, </span>
    <span class="item hidden">Value 3</span><span class="delim">, </span> 
    <span class="item">Value 4</span><span class="delim">, </span> 
    <span class="item">Value 5</span>
</div>

CSS

.hidden {
    display:none;
}

JavaScript

var getEl = function(str){
    return document.getElementById(str);
};
var getByClass = function(wrap, className){
    var el = wrap.getElementsByTagName('*');
    var arr = new Array();
    for(var i = 0; i < el.length; i++){
        if(el[i].className.match(className)){ arr.push(el[i]); }
    }
    return arr;
};
var nextEl = function(el){
    var node = el.nextSibling;
    if(node && node.nodeType && node.nodeType != 1){
        node = nextEl(node);
    }
    return node;
};

var toggleDelim = function(list){
    var items = getByClass(list, 'item');
    
    for(var i = 0, l = items.length; i < l; i++){
        if(/hidden/.test(items[i].className)){
            if(nextEl(items[i])){
               nextEl(items[i]).style.display = 'none';
            }
        }else{
            if(nextEl(items[i])){
                nextEl(items[i]).style.display = 'inline';
            }
        }
    }
};

toggleDelim(getEl('list'));