JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content" class="unchanged">
	
	<input id="o" type="range" value="90" min="0" max="100" step="1"></input>
	<input id="s" type="range" value="80" min="0" max="100" step="1"></input>
	<input id="v" type="range" value="70" min="0" max="100" step="1"></input>
	

</div>

JavaScript

$(document).ready(function(){

	
	function collectInfo(goal) {
		    var foo = {};
		    $(goal).each(function () {
		        var current = $(this);
		        var id = current.attr('id');
		        if (id) {
		            foo[id] = current.val()
		        }
		    }); 
		    return JSON.stringify(foo);
	}
		
	$('#content input').on('mouseup', function(){
			fxx = collectInfo('#content input');	
			alert(fxx); // {"o": "apple", "s": "dog", "v": "red"}				
			alert(fxx.o+', '+fxx.s+', '+fxx.v);  //undefined, undefined, undefined			
	});
	
});