javascript - add data atribute dynamically -

my html is

<div id="ctup-ads-widget-2" class="caption slide-heading "  data-x="380" data-y="80" data-speed="1800" data-start="1200" data-easing="easeoutexpo">hui</div> 

i trying change values of dat=x , data-y dyanamicaly

i tried both below did not work .please help

<script> $('#ctup-ads-widget-2').click(function() {      $(this).attr("data-x", "580"); }); </script> 

and

<script> $('#ctup-ads-widget-2').click(function() {     $(this).data('x') = "580"; }); </script> 

and

<script> window.onload = function() {     var anchors = document.getelementbyid('ctup-ads-widget-2');     (var = 0; < anchors.length; i++) {         anchors[i].setattribute('data-x', '580');         anchors[i].setattribute('data-y', '30');     } } </script> 

consol screenshot

error screenshot

you can't use like

$(this).data('x') = "580";//won't work 

try data()

 $(this).data("x","580"); //$(this).attr("data-x", "580") should work 

update

enclose in $(document).ready..

$(document).ready(function(){   $('#ctup-ads-widget-2').click(function() {     $(this).data("x","580");   }); })