JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div>
    <h4>Ability Name</h4>
    <p>description</p>
    <em class="text-warning"></em>
</div>

JavaScript

var talents = {
    "Confident Aim": {
        "Name": "Confident Aim",
        "Description": "",
        "Icon": ""
    }
};
    
var abilities = {
    "Penetrating Round": {
        "Name": "Penetrating Round",
        "Description": "Deals {85+(22*(lvl-1))} damage and knocks enemies back.",
        "Icon": "",
        "Modifiers": {
            "Confident Aim": "",
            "Hamstring Shot": "",
            "Bullseye": "*1.5"
        }
    }
};
var lvl = 1;
var chosen = ['Confident Aim', 'Hamstring Shot', 'Bullseye'];
var exEval = function(str, mods){
    var s = str.indexOf('{')+1,
        e = str.indexOf('}'),
        l = e-s,
        exp = str.substr(s,l);
    exp = eval(exp);
    if(mods != undefined){
        exp = eval(exp+mods); 
    }
    return str.substr(0,s-1)+eval(exp)+str.substr(e+1);
}
$("h4").text(abilities['Penetrating Round'].Name);
$("p").text(exEval(abilities['Penetrating Round'].Description));

$("em").text(function(){
    var mods = [];
    $.each(abilities['Penetrating Round'].Modifiers, function(talent, mod){
        if(chosen.indexOf(talent) != -1){
            mods.push(talent);
            $("p").text(exEval(abilities['Penetrating Round'].Description, mod));
        }
    });
    return mods.join(', ');
});