JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
</ul>

JavaScript

var buttons = [ {"tag":"adr","color":"#123456"},
               {"tag":"ag","color":"#123456"},
               {"tag":"fax","color":"#123456"},
               {"tag":"ind","color":"#123456"},
               {"tag":"sname","color":"#123456"},
               {"tag":"per","color":"#123456"},
               {"tag":"tel","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"url","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"weblink","color":"#123456"},
               {"tag":"close","color":"#123456"} ];

    var buttonsP =[];
    
    for (var i = 0; i < buttons.length; i++){
        
        var newObject = { "valueTagP": buttons[i].tag, "colorTagP": buttons[i].color };   
        var newArr = $.grep(buttonsP, function(obj) {             
            return obj.valueTagP === buttons[i].tag; 
        });
        if(newArr.length === 0) {
            buttonsP.push(newObject);
        }
    }
    
    for (var i = 0; i < buttonsP.length; i++){
        $(".list").append("<li>"+ buttonsP[i].valueTagP + ", " + buttonsP[i].colorTagP +"</li>");
    }