How to associate two different inputs collected in different times, and recall back them when it is needed?

I want to bind two different inputs in the form of integers, collected on a button click event, and want to call back them! But I am stuck, take a look at my code:

$(function (){
var j;
$("#first").on("click" , function (){
j++;
});
$("#second").on("click" , function (){
var d = new Date();
var dhou = d.getHours();
var dmin = d.getMinutes();
var dsec = d.getSeconds();
var dtotal = dhou+dmin+dsec;
});
$("#third").on("click" , function (){
//I want to recall here both dtotal and j variable together collected in different times, like in the form (dtotal , j) = (72000,1) , (72809,2) , (73578 ,3) and so on...
});
});

Please read the comment inside the code present inside #third ID

Solution

You need to declare the variables outside both functions, in a scope they can both access. you have already done that for that j variable so it is available for you in the third event but you haven't declared variables which are in the second event outside, so you can not use them..your problem will be solved once you declares them outside of both functions..

$(function (){
var j=0;
var d = "";
var dhou = "";
var dmin = "";
var dsec = "";
var dtotal = "";
$("#first").on("click" , function (){
j++;
});
$("#second").on("click" , function (){
d = new Date();
dhou = d.getHours();
dmin = d.getMinutes();
dsec = d.getSeconds();
dtotal = dhou+"-"+dmin+"-"+dsec;
});
$("#third").on("click" , function (){
$("#result").append("<br/>"+dtotal +","+ j);
});
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    
<button id="first">one</button>
<button id="second">two</button>
<button id="third">three</button>

</br>

<p id="result"></p>
</body>
</html>