How can I select the last 4 characters of a string using JavaScript?

Question

This code chooses the highest numerical value between the data ids and adds an lime background to it. btw these numbers are hex values. my problem is that in hex values its the matter of the last 4 values but my code takes the whole characters. how can i make my code work for only the last 4 characters?

Im sorry this might be easy to solve for you but i tried over and over again and couldnt make it work.

Hex to decimal:

dc61 = 56417

dc62 = 56418

dc63 = 56419

dc64 = 56420

 maxData = $(".answers li[data-id]").get ().reduce  ( (maxObj, crrntNode) => {
 
    var idVal   = parseInt ( $(crrntNode).data("id"), 16) ; 

    if (idVal > maxObj.value) {
        maxObj.value  = idVal;
        maxObj.node   = crrntNode;
    }
    return maxObj;
  },
  {value: 0, node: null}
);
$("body").append (`<p>The highest data-id value was ${maxData.value}.</p>`)
$(maxData.node).css ("background", "lime");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question sp-element border-radius active">What is favorite colour?</div>
          <ul class="answers" id="answers">
            <li data-id="58b9890062279282090ddc61" class="answer sp-element border-radius active">Purple</li>
            <li data-id="58b9890062279282090ddc63" class="answer sp-element border-radius active">Blue</li>
            <li data-id="58b9890062279282090ddc64" class="answer sp-element border-radius active">Yellow</li>
            <li data-id="58b9890062279282090ddc62" class="answer sp-element border-radius active">Red</li>
          </ul>

Answer 1

By using substr you can get the last 4 characters of the data attribute. So, instead of:

var idVal = parseInt($(crrntNode).data("id"), 16);

You can do something like this:

var nodeId = $(crrntNode).data("id");
var idVal = parseInt(nodeId.substr(nodeId.length - 4), 16);

 maxData = $(".answers li[data-id]").get ().reduce  ( (maxObj, crrntNode) => {
    var nodeId = $(crrntNode).data("id");
    var idVal = parseInt(nodeId.substr(nodeId.length - 4), 16); 

    if (idVal > maxObj.value) {
        maxObj.value  = idVal;
        maxObj.node   = crrntNode;
    }
    return maxObj;
  },
  {value: 0, node: null}
);
$("body").append (`<p>The highest data-id value was ${maxData.value}.</p>`)
$(maxData.node).css ("background", "lime");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question-text" class="question sp-element border-radius active">What is favorite colour?</div>
          <ul class="answers" id="answers">
            <li data-id="58b9890062279282090ddc61" class="answer sp-element border-radius active">Purple</li>
            <li data-id="58b9890062279282090ddc63" class="answer sp-element border-radius active">Blue</li>
            <li data-id="58b9890062279282090ddc64" class="answer sp-element border-radius active">Yellow</li>
            <li data-id="58b9890062279282090ddc62" class="answer sp-element border-radius active">Red</li>
          </ul>