Edit in JSFiddle

/*
 * Usage: write comma-separated list ofnumbers
 * corresponding to each unit and press enter to
 * calculate. 
 * X = extra, R = rolls. 
 * R is special, see example
 */

const tvalues = [20,10,5,1,1,null,.25,.10,.05,.01],
      tstrings = "20,10,5,1,X,R,Q,D,N,P".split(","),
      tvrmap = {Q:10,D:5,N:2,P:0.5},
      dqs = id => document.querySelector(id),
      input = dqs("input.tcount"),
      example = dqs("input.example"),
      out = dqs("pre.out");

function padtext(text, width, reverse = 0){
    while(text.length < width)
        if(reverse)
            text = " " + text;
        else
            text += " ";
    
    return text;
}

function getval(val, tval){
    if(tval === null)
        return val
            .split("")
            .reduce((a, b) => a + tvrmap[b], 0);

    return +val * tval;
}

function ev_input_keydown(ev){
    let tivalues,
        longest,
        buf = "";
    
    if(ev.key !== "Enter")
        return;
    
    tivalues = input.value.split(",");
    longest = tivalues.reduce((a, b) => Math.max(a, b.length), 0);
    
    tivalues.forEach(function(val, i){
        buf += `${padtext(tstrings[i], 2, 1)}: ${padtext(val, longest)} ($${padtext("" + getval(val, tvalues[i]).toFixed(2), 7, 1)})\n`;
    });
    
    buf += `-----\nTotal: $${tivalues.reduce((a,b,i) => a + getval(b, tvalues[i]), 0).toFixed(2)}`;
    
    out.innerHTML = buf;
}

input.placeholder = tstrings.join(", ");

input.addEventListener("keydown", ev_input_keydown);
example.addEventListener("click", function(unused){
    input.value = "4,6,23,61,151.50,QQQQDDNNPP,26,27,28,57";
    ev_input_keydown({key: "Enter"});
});
<input class="example" type="button" value="show example"><br>
<input class="tcount">
<pre class="out"></pre>