Space craft shop demo: You can copy-paste js to you chrome console → sources → snipets, hit cmd+enter and play around!

boxes.css

.box {
    margin: 10px;
    height: 50px;
    width: 50px;
    display: inline-block;
}

.rocket {
     background: url(http://www.rockybytes.com/i/924/mp3-rocket.jpg); 
}
.satellite {
    background: url(https://www.shareicon.net/data/256x256/2015/05/07/34695_gps_400x400.png);
    background-size: contain;
}
.solar-panel {
    background: url(https://vignette.wikia.nocookie.net/spaceengineers/images/c/c9/Icon_Block_Solar_Panel.png/revision/latest?cb=20170516204633);
    background-size: contain;
}

react.js

function main(div) {
    const el = React.createElement
    class RocketLab extends React.Component {
        constructor() {
            super()
            this.state = {
                current: 'satellites',
                rockets: 2,
                satellites: 5,
                solarPanels: 7
            }
            this.switchCurrent = this.switchCurrent.bind(this)
            this.setValue = this.setValue.bind(this)
        }
        switchCurrent(e) {
            this.setState({current: e.currentTarget.elements.namedItem('current').value})
        }
        setValue(e) {
            this.setState({[this.state.current]: Number(e.target.value)})
        }
        render() {
            return [
                el('h3', {key: 'r'}, 'rockets'),
                ...range(this.state.rockets).map((_, i) => el('div', {className: 'box rocket', key: `r${i}`})),
                el('h3', {key: 's'}, 'satellites'),
                ...range(this.state.satellites).map((_, i) => el('div', {className: 'box satellite', key: `s${i}`})),
                el('h3', {key: 'sp'}, 'solar panels'),
                ...range(this.state.solarPanels).map((_, i) => el('div', {className: 'box solar-panel', key: `sp${i}`})),
                el('form', {onChange: this.switchCurrent, key: 'sw'}, 
                    el('label', {key: 'r'}, 
                        'rockets',
                        el('input', {type: 'radio', value: 'rockets', name: 'current', checked: this.state.current === 'rockets'})
                    ),
                    el('label', {key: 's'}, 
                        'satellites',
                        el('input', {type: 'radio', value: 'satellites', name: 'current', checked: this.state.current === 'satellites'})
                    ),
                    el('label', {key: 'sp'}, 
                        'solar panels',
                        el('input', {type: 'radio', value: 'solarPanels', name: 'current', checked: this.state.current === 'solarPanels'})
                    )
                ),
                el('input', {type: 'number', min: 0, max: 20, step: 1, value: this.state[this.state.current], onChange: this.setValue, key: 'i1'}),
                el('input', {type: 'range', min: 0, max: 20, step: 1, value: this.state[this.state.current], onChange: this.setValue, key: 'i2'})
            ]
        }
    }
    ReactDOM.render(el(RocketLab), div)
}
bootstrap().then(main)


function range(n) {
    return new Array(n).fill(0)
}

function bootstrap(){
    const css = document.createElement('link')
    css.rel = 'stylesheet'
    css.href = 'https://rawgit.com/RB-Lab/fe25acc80ea83ed1c51bc3352a703198/raw/a326735b43bf0cf8c8f8fa5ab8c6a20cdd77047a/boxes.css'
    document.head.appendChild(css)
    const react = document.createElement('script')
    react.src = 'https://unpkg.com/react@16/umd/react.development.js'
    document.head.appendChild(react)
    const reactDom = document.createElement('script')
    reactDom.src = 'https://unpkg.com/react-dom@16/umd/react-dom.development.js'
    document.head.appendChild(reactDom)
    const div = document.createElement('div')
    document.body.appendChild(div)
    
    return new Promise(resolve => react.onload = resolve)
        .then(() => new Promise(resolve => reactDom.onload = resolve))
        .then(() => div)
}

vanila.js

function main() {
    bootstrap()


    const state = {
        current: 'satellites',
        rockets: 2,
        satellites: 5,
        solarPanels: 7
    }

    function onInput(e) {
        state[state.current] = Number(e.target.value)
        render()
    }

    function switchCurrent(e) {
        state.current = e.currentTarget.elements.namedItem('current').value
        render()
    }

    function render() {
        clear(document.body)
        appendTo(document.body)(
            h3('rockets'),
            ...range(state.rockets).map(() => div('box rocket')),
            h3('satellites'),
            ...range(state.satellites).map(() => div('box satellite')),
            h3('solarPanels'),
            ...range(state.solarPanels).map(() => div('box solar-panel')),
            appendTo(el('form', {class: 'switch', change: switchCurrent}))(
                appendTo(el('label', {text: 'rockets'}))(
                    input({type: 'radio', value: 'rockets', name: 'current', checked: state.current === 'rockets'})
                ),
                appendTo(el('label', {text: 'satellites'}))(
                    input({type: 'radio', value: 'satellites', name: 'current', checked: state.current === 'satellites'})
                ),
                appendTo(el('label', {text: 'solarPanels'}))(
                    input({type: 'radio', value: 'solarPanels', name: 'current', checked: state.current === 'solarPanels'})
                )
            ),
            input({type: 'number', min: 0, max: 20, step: 1, value: state[state.current], input: onInput}),
            input({type: 'range', min: 0, max: 20, step: 1, value: state[state.current], input: onInput})
        )
    }
    render()
}
main()

function clear(el) {
    while(el.children.length) el.removeChild(el.firstChild)
}

function range(n) {
    return new Array(n).fill(0)
}

function appendTo(target) {
    return function append(...els) {
        els.forEach(el => target.appendChild(el))
        return target
    }
}

function el(tagName, attrs) {
    const element = document.createElement(tagName)
    if(attrs.text) {
        element.textContent = attrs.text
        delete attrs.text
    }
    Object.keys(attrs).forEach(attr => {
        if (typeof attrs[attr] === 'function') {
            element.addEventListener(attr, attrs[attr])
            return 
        }
        if(typeof attrs[attr] === 'boolean' && ! attrs[attr]) return
        element.setAttribute(attr, attrs[attr])
    })
    return element
}

function div(className) {
    return el('div', {class: className})
}

function h3(text){
    return el('h3', {text})
}

function input(attrs){
    return el('input', attrs)
}

function bootstrap() {
    appendTo(document.head)(
        el('link', {
            rel: 'stylesheet',
            href: 'https://rawgit.com/RB-Lab/fe25acc80ea83ed1c51bc3352a703198/raw/a326735b43bf0cf8c8f8fa5ab8c6a20cdd77047a/boxes.css'
        })
    )
}