JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>  
<html lang="en">
<head>

	<meta charset="utf-8">

	<title>Dream Guitars</title>


	<!--  Mobile viewport optimized: j.mp/bplateviewport -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Mobile IE needs ClearType for smoothing fonts -->
	<meta http-equiv="cleartype" content="on">

	<!-- StyleSheets under here -->



	<!-- JavaScript is normally at the end of the body, except for Modernizr which enables HTML5 elements & feature detects -->
	<!-- // <script src="js/libs/modernizr.custom.min.js"></script> -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
	<link rel="stylesheet" href="css/style.css"/>


</head>
<body>


<!--Main Page-->

<div data-role="page" id="home" data-theme="c">
 
	<!-- CTA/Feature -->
	<a href="#addGuitar" data-ajax="false" ><img src="img/cta5.jpg"></a>

	<!-- Browse -->

	<div data-role="content">
 		<ul data-role="listview" data-filter="true" data-theme="c">

				<li data-role="list-divider" data-filter="true">Browse Categories</li>
				<li><a href="#thumbT" data-ajax="false">Brand</a></li>
				<li><a href="dummypage.html" data-ajax="false">Model</a></li>
				<li><a href="dummypage.html" data-ajax="false">Feature</a></li>
				<li><a href="dummypage.html" data-ajax="false">Rating</a></li>
				<li><a href="dummypage.html" data-ajax="false">Acoustic</a></li>
				
			</ul>

	</div>
		<!-- Navigation -->
	<div data-role="navbar" data-position="fixed">
		<ul>
			<li><a href="#home" data-icon="home" data-theme="a">Home</a></li>
			<li><a href="#about" data-icon="info" data-theme="a">About</a></li>
		</ul>
	</div>
</div>


<!-- add Page -->
<div data-role="page" id="thumbT" data-theme="c">
	<div data-role="header">
	<a href="index.html" data-icon="arrow-l">Back</a>
	<h1>Brand</h1>
</div>

<div data-role="content">
		<div class="content-primary">	

		<ul...

JavaScript

/*
var parseGuitar = function(data){
	
}
*/

var ge = function (id){
return document.getElementById(id);
 
};

    var getCheckboxValue = function (){
        var checkboxes = document.forms[0].feature;
        var checkedArray = [];
        for (var i=0, j=checkboxes.length; i<j; i++){
            if (checkboxes[i].checked) {
            //console.log(checkboxes[i].value);
                checkedArray.push(checkboxes[i].value);
            }
        }
/*         console.log(checkedArray); */
        return checkedArray;
    };

//Find value of selected radio button.
var getSelectedRadio = function(){
        var radios = document.forms[0].acoustic;
        for(var i=0, j=radios.length; i<j; i++){
            if(radios[i].checked) {
            console.log(acousticValue);
                acousticValue = radios[i].value;
                
            }
        }
        return acousticValue;
       
};
 
 

var storeData = function(key){

	//If there is not key, new key will be generated.
	var id;
	if (!key) {
	    id = Math.floor(Math.random()*10000001);
	} else {
	        //Otherwise, set id to key to overwrite data.
	    id = key;
	}
	var acousticValue = getSelectedRadio();
	/* var checkedBoxes =  */
	var propertyChecked = getCheckboxValue();
	var item = {};
	        item.brand = ["Brand:",brand.value];
	        item.model = ["Model:",model.value];
	        item.feature = ["Features:", propertyChecked];
	        item.rating = ["Rating:", document.forms[0].rating.value];
	        item.acoustic = ["Acoustic:", acousticValue];
	        item.comments = ["Comments:",comments.value];

	        
	       
	        
	
	//Save data into local storage: Use Stringify to convert our object to a string
	localStorage.setItem(id,JSON.stringify(item));
	alert("Contact Saved!");
        
}; 




$('#home').on('pageinit', function(){
	//code needed for home page goes here
});	
		
$('#addGuitar').on('pageinit', function(){
		var myForm = $('#addguitarform');
		   ...