JSFiddle - React, Tailwind, and code Playground

HTML

<form>Arkonor
    <input type="number" id="22" value="0">
    <br>Crimson Arkonor
    <input type="number" id="17425" value="0">
    <br>Prime Arkonor
    <input type="number" id="17426" value="0">
    <br>Bistot
    <input type="number" id="1223" value="0">
    <br>Triclinic Bistot
    <input type="number" id="17428" value="0">
    <br>Monoclinic Bistot
    <input type="number" id="17429" value="0">
    <br>Crokite
    <input type="number" id="1225" value="0">
    <br>Sharp Crokite
    <input type="number" id="17432" value="0">
    <br>Crystalline Crokite
    <input type="number" id="17433" value="0">
    <br>Dark Ochre
    <input type="number" id="1232" value="0">
    <br>Onyx Ochre
    <input type="number" id="17436" value="0">
    <br>Obsidian Ochre
    <input type="number" id="17437" value="0">
    <br>Gneiss
    <input type="number" id="1229" value="0">
    <br>Iridescent Gneiss
    <input type="number" id="17865" value="0">
    <br>Prismatic Gneiss
    <input type="number" id="17866" value="0">
    <br>Hedbergite
    <input type="number" id="21" value="0">
    <br>Vitric Hedbergite
    <input type="number" id="17440" value="0">
    <br>Glazed Hedbergite
    <input type="number" id="17441" value="0">
    <br>Hemorphite
    <input type="number" id="1231" value="0">
    <br>Vivid Hemorphite
    <input type="number" id="17444" value="0">
    <br>Radiant Hemorphite
    <input type="number" id="17445" value="0">
    <br>Jaspet
    <input type="number" id="1226" value="0">
    <br>Pure Jaspet
    <input type="number" id="17448" value="0">
    <br>Pristine Jaspet
    <input type="number" id="17449" value="0">
    <br>Kernite
    <input type="number" id="20" value="0">
    <br>Luminous Kernite
    <input type="number" id="17452" value="0">
    <br>Fiery Kernite
    <input type="number" id="17453" value="0">
    <br>Mercoxit
    <input type="number" id="11396" value="0">
    <br>Magma Mercoxit
    <input type="number" id="17869" value="0">
    <br>Vitreous Mercoxit
...

JavaScript

import java.net.URL;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.xpath.*;
import org.w3c.dom.Document;

	URL url = new URL("http://api.eve-central.com/api/marketstat?typeid=22,17425,17426,1223,17428,17429,1225,17432,17433,1232,17436,17437,1229,17865,17866,21,17440,17441,1231,17444,17445,1226,17448,17449,20,17452,17453,11396,17869,17870,1227,17867,17868,18,17455,17456,1224,17459,17460,1228,17463,17464,19,17466,17467,1230,17470,17471&regionlimit=10000002");
	Document document = DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(url.openStream());
	XPath xpath = XPathFactory.newInstance().newXPath();

var IDs = [22,17425,17426,1223,17428,17429,1225,17432,17433,1232,17436,17437,1229,17865,17866,21,17440,17441,1231,17444,17445,1226,17448,17449,20,17452,17453,11396,17869,17870,1227,17867,17868,18,17455,17456,1224,17459,17460,1228,17463,17464,19,17466,17467,1230,17470,17471];

calculate = function (i)
{
    var y = document.getElementById('reward'); //to display in reward box
    var x = 0;  
	XPathExpression expr;
	Object result;
	var elm; 
    while (i + 1 < IDs.length)
	{
		expr = xpath.compile("//marketstat/type[@id = '" + IDs[i] + "']/buy/max/text()"); //define XPath for each typeID
		result = expr.evaluate(document);
        elm = document.getElementById(IDs[i]);
		x=x+parseInt(elm.value||0)*parseInt(result); //multiply the max buy price for this typeID by the number of units entered in the html form
        i++;
    }
    y.value = x;
};