poniżej przykład bez jquery
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>godziny dodawanie</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<label>podaj godziny</label>
<input id='hours' type='number' min=0 max=24>
<label>podaj minuty</label>
<input id='minutes' type='number' min=0 max=60>
<button id='add-btn'>dodaj</button>
<p id='result'>...</p>
<script>
const addButton = document.querySelector('#add-btn')
const hours = document.querySelector("#hours")
const minutes = document.querySelector('#minutes')
const result = document.querySelector('#result')
add30min = () => {
const time = new Date()
time.setHours(parseInt(hours.value))
time.setMinutes(parseInt(minutes.value) + 30)
result.innerHTML = `${time.getHours()} : ${time.getMinutes()}`;
}
addButton.addEventListener('click',add30min);
</script>
</body>
</html>