JSFiddle - React, Tailwind, and code Playground

JavaScript

var data = [
        {
            prod_name:"test1", type:"1", color:"white", product_id:"5"
        },
        {
            prod_name:"test2", type:"1", color:"green", product_id:"7"
        },
        {
            prod_name:"test2", type:"2", color:"green", product_id:"7"
        },
        {
            prod_name:"test3", type:"4", color:"red", product_id:"8"
        },
        {
            prod_name:"test4", type:"2", color:"white", product_id:"21"
        }    
    ];

jQuery.each( data, function( i, val ) {
    var productID = val.product_id;
	var index_key = i;
    jQuery.each( data, function( i, val ) {
		if(val.product_id == productID && data[index_key] != data[i]){
			jQuery.extend(data[index_key], data[i]);
		}
	});
});

console.log(data);