JSFiddle - React, Tailwind, and code Playground

by warlock5658

HTML

<div id="test" data-options='{"option1": "car", "index": 2}'></div>

JavaScript

console.log($('#test').data('options'));
var url = "http://www.example.com/?index=4";

/* 
*    Retrieve the index from the url from window.location.href;
*    For this example the url is hardcoded.
*/

var index = null;
if(url.lastIndexOf('?') != -1) {
    index = url.split('?')[1];
    index = index.split('=')[1];
}

/*
*    Now we have the index. Let's continue...
*/

var $test = $('#test');
var obj = $test.data('options');
obj.index = parseInt(index);
$test.data('options', obj);
console.log($('#test').data('options'));

/*
*    Now open your developer tools (usually "F12" and check
*    out the two objects in the console. The first one has
*    a value of 2 (which is good, the original). The second
*    one has the updated value of 4 removed from the URL.
*/