attaching associated attributes from populated select options

attaching associated attributes from populated select options

So I've got a select element A that populates select element B with lists of classes, and whatever option of B is chosen changes some CSS. What I want is for that class option chosen in select element B to also populate multiple text boxes with data also associated with that class. 

I know that in a single select element i can list multiple values for each option, like:

    <option value="abc" someothervalue="def">whatever</option>

I also know that I could set up some PHP code that connects to a server database with Ajax or SQL or something, but honestly I'm just learning jquery and don't want to  get that complex if I don't have to. 

I'm able to connect the original selected class to the text with the following function:

$("#opt2").on("change", function(){
    var selected = $(this).val();
        $("#results1").html(selected);
        $("#results2").html(selected);
$("#results3").html(selected);
        $("#results4").html(selected);
})

...but that only returns the class value, not any of that class' associated values I'd like to add. (And it's not really working in the fiddle, though in other places & in browsers it's fine...) 

So is there a way to add multiple values to the populated options, and if so, how do I connect them to the text elements?

TLDR: i want a javascript function that goes "when class N is selected as the option, put class N attribute 1 text here, attribute 2 text here, etc." 

Here's the fiddle -  thanks.