JSFiddle - React, Tailwind, and code Playground

HTML

<div>
 
    <li data-item="item1">1<p></p><span></span></li>
  <li data-item="item2">2<p></p><span></span></li>
  <li data-item="item3">3<p></p><span></span></li>
  <li data-item="item4">4<p></p><span></span></li>
  
</div>

JavaScript

var data = [
    {
        "word": "hello",
        "favnumber": "0070",
        "item": "item1",
        "color": "red"
   },
   {
        "word": "hello world",
        "favnumber": "0233070",
        "item": "item2",
        "color": "blue",
       "Promo": {
            "Price": 3.99
        }
   },
   {
        "word": "hello mom",
        "favnumber": "0070",
        "item": "item3",
        "color": "pink",
       "Promo": {
            "Price": 4.99
        }
   },
   {
        "word": "hello dad",
        "favnumber": "0070",
        "item": "item4",
        "color": "silver",
        "Promo": {
            "Price": 8.99
        }
   }    
];

var items = document.querySelectorAll('[data-item]');

for (var e in items) {
    var element = items[e];
    var name = $(element).attr('data-item');
    
    for (var i in data) {
        var item = data[i];
        
        if (name == item.item) {
            var colorValue = item.color
            var promoPriceValue = item.Promo ? item.Promo.Price : 10.99
            $(element).find('p').text(colorValue)
            $(element).find('span').text(promoPriceValue)
        }
    }
}