Replacing variables in jQuery keeps using the prior value

I have the next input that shows "buy" value by default

    <input class="myVar" data-buy="50000" data-sell="80000" value="5000" />
    <button id="change">CHANGE PRICES</button>
    <button id="toggle">TOGGLE</button>

I click on "#change" in order to increase the amount of "buy" and "sell"

     $(document).on("click", #change", function(){
         $(".myVar").attr("data-buy",6000);
         $(".myVar").attr("data-sell",9000);
      
     });

Now if I toggle the value shown in "myVar" input restores to the default values.

      $("#toggle").toggle(
     function(){
   
       $(".myVar").val($(".myVar").data("buy"));
       },
      function(){ 
      $(".myVar").val($(".myVar").data("sell"));
      }

      );

What am I doing wrong?

I know the variables need to be set on the DOM,

I tried

       $(document).on("click", ".change", function(){
         $(".myVar").attr("data-buy",6000);
         $(".myVar").attr("data-sell",9000);
                    $("#toggle").click()
      
     }); 

but it changes the behaviour but it still show the initial values.

Remove $(...).data and use $(...).attr("data-type",...)

This is what I did.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).ready(function(){
  // CHANGE PRICES click
  $("#change").click(function(){
    $(".myVar").attr("data-buy",6000);
         $(".myVar").attr("data-sell",9000);
  });
  
  // toggle click
  $("#toggle").click(function(){
    if($(this).attr("data-type") === 'buy'){
    	$(".myVar").val($(".myVar").attr("data-buy"));
        $(this).attr("data-type",'sell');
    }else{
    	$(".myVar").val($(".myVar").attr("data-sell"));
        $(this).attr("data-type",'buy');
    }
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="myVar" data-buy="50000" data-sell="80000" value="50000" />
    <button id="change">CHANGE PRICES</button>
    <button data-type="sell" id="toggle">TOGGLE</button>

<!-- end snippet -->

There are a few problems in your code.

The first is really the only problem for you in your environment, I think. Using .data() is the correct way to access and manipulate data attributes, but I noticed that your code mixes using .data() and .attr() to access the same values, eg:

$(".myVar").attr("data-buy",6000);

and

$(".myVar").val($(".myVar").data("buy"));

Replacing the cases where you're using .attr() to instead consistently use .data() is all that is needed to get your code working as you describe (with old versions of jQuery, see next item). Here's a working snippet using jQuery 1.8.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on("click", "#change", function() {
  $(".myVar").data("buy", 6000);
  $(".myVar").data("sell", 9000);
});

$("#toggle").toggle(
  function() {
    $(".myVar").val($(".myVar").data("buy"));
  },
  function() {
    $(".myVar").val($(".myVar").data("sell"));
  }
);

<!-- language: lang-html -->

<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<input class="myVar" data-buy="50000" data-sell="80000" value="5000" />
<button id="change">CHANGE PRICES</button>
<button id="toggle">TOGGLE</button>

<!-- end snippet -->

The second problem relates to .toggle(). In old versions of jQuery, there was a toggle() event handler, but it was deprecated long ago (in version 1.8, from 2012!). Presumably you are using an ancient version of jQuery where this still works, but for security reasons alone you should probably upgrade.

In any version of jQuery less than 10 years old, .toggle() will show or hide an element. In your code that means the <kbd>toggle</kbd> button just disappears immediately on page load. Here's a copy of the above snippet, changed only to use the current version of jQuery, which demonstrates that.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on("click", "#change", function() {
  $(".myVar").data("buy", 6000);
  $(".myVar").data("sell", 9000);
});

$("#toggle").toggle(
  function() {
    $(".myVar").val($(".myVar").data("buy"));
  },
  function() {
    $(".myVar").val($(".myVar").data("sell"));
  }
);

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="myVar" data-buy="50000" data-sell="80000" value="5000" />
<button id="change">CHANGE PRICES</button>
<button id="toggle">TOGGLE</button>

<!-- end snippet -->

If and when you do upgrade jQuery, you'll need to update this code too. All you really need is a click handler, AFAICT, to trigger display of one value or the other. The catch is you need to track which one is currently displayed, so that you can show the other one when the button is clicked. Maybe we can use another data attribute on the input to track which is currently being displayed, something like:

<input class="myVar" data-showing="buy" ...

Then when you click the <kbd>toggle</kbd> button you can check which is currently shown, load and show the other, and then update that attribute to save the current state. Note we need an extra case to handle the initial state, when the displayed value is neither the buy value nor the sell value (I'm not sure if that is just a typo or actually required).

Here's an example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(document).on("click", "#change", function () {
    $(".myVar").data("buy", 6000);
    $(".myVar").data("sell", 9000);
});

$("#toggle").on('click', function () {
    let val = '';
    let showing = $(this).data('showing');
    
    // Handle both buy case and initial case when displayed value is neither sell or buy value
    if (showing === 'buy' || showing === '') {
        val = $(".myVar").data("sell");
        showing = 'sell';
    } else {
        val = $(".myVar").data("buy");
        showing = 'buy';
    }
    
    $(".myVar").val(val);
    $(this).data('showing', showing);
});

<!-- language: lang-html -->

<script src="https://code.jquery.com/jquery-1.8.0.min.js"></script>
<input class="myVar" data-showing="" data-buy="50000" data-sell="80000" value="5000" />
<button id="change">CHANGE PRICES</button>
<button id="toggle">TOGGLE</button>

<!-- end snippet -->