How to load values ​​into a block on click?

Question

JavaScript

There is an object from which the value is taken and inserted into the tag. But since there are only 3 tags, it should be in the markup, and by itself it will not be possible to show all the information at once, it is necessary that the information be loaded in turn. How to do it correctly so that, for example, when clicking, the following values ​​are taken from the object and written to the tag, and the previous ones are deleted?

for example, there are 4 name objects, but there are only 3 h1 tags. How to make such a function so that when clicked, the value of the next object is taken, written to h1, and what was deleted?

Here is the object itself:

var json_date = {
  "dills": {
    "1": {
      "name": "boock_1",
      "time": "15:00",
    },
    "2": {
      "name": "book_2",
      "time": "15:00",
    },
    "3": {
      "name": "book_3",
      "time": "09:00",

    },
    "4": {
      "name": "book_4",
      "time": "05:00",

    }
  }
}

//Функция которая подгружает значения в теги :

var ix = 0;

$.each(json_date['dills'], function(key, val) {



  $('li > h1').eq(ix++).text("").text(val.name);
  console.log(ix);
});

fiddle : https://jsfiddle.net/sxzk9ooa/6/

Answer 1

As I understand it, I show it: tyts
HTML:

<p></p>
<input class="js-but" type="button" value="my_button" />

JS:

var json_date = {
  "dills": {
    "1": {
      "name": "boock_1",
      "time": "15:00",
    },
    "2": {
      "name": "book_2",
      "time": "15:00",
    },
    "3": {
      "name": "book_3",
      "time": "09:00",

    },
    "4": {
      "name": "book_4",
      "time": "05:00",

    }
  }
}

var ix = 1;
$('.js-but').on('click', function () {
    var valName = json_date.dills[ix].name;
    $('p').text(valName);
    ++ix;
});