Calculate and auto populate dynamic elements

Question

I'm trying to fix my Time Form script to calculate the rest of the days. Right now it only calculates In and Out aka Duration for Day 1. Not certain on how to get the day 2 plus data to calculate.

Another issue I'm having is not being able to edit day 1 as when I add in new Days I'm not longer able to calculate duration. However If I go back to day 1 and delete the extra days then I'm able to edit and calculate again.

P.S. Segments is what I'm referring to as days.

		var template;
		var numOfSegments = 1;

		window.addEventListener('load', function() {
			template = document.querySelector("#wrapper").innerHTML;
			document.querySelector("#more_fields").addEventListener("click", function(e) {
				e.preventDefault(); // tell the browser to not send the form
				document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
				numOfSegments = document.querySelectorAll("div.segment").length;
				document.querySelector("div.segment:last-of-type > label").innerHTML = "Day " + (numOfSegments) + ":"; //Updates Segment #
			});
		})


		function deleteMe() {
			if (numOfSegments > 1) {
				var btn = document.querySelector("#wrapper > div.segment:last-of-type");
				btn.remove();
				event.preventDefault();
			}
		}

		function addNumSeg() {
			var elem = document.getElementById("segments_num");
			elem.value = ++numOfSegments;
		}

		function subtractNumSeg() {
			var elem = document.getElementById("segments_num");
			if (numOfSegments > 1) {
				elem.value = --numOfSegments;
			}
		}

	<form id="seg" oninput="z.value=parseInt(segout.value)-parseInt(segin.value)">
		<div id="room_fileds">
			<div class="content" id="wrapper">
				<div class="segment">
					<label id="seg[]" style="margin:0 0 10px 60px;display: inline;">Day 1:</label>
					<div class="form-group" style="display: inline;">
						<label id=seg-in[] style="margin:0 0 10px 35px;display: inline;">IN:</label>
						<input class="form-control seg_in" id="segin" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
					</div>
					<div class="form-group" style="display: inline;">
						<label id=seg-out[] style="margin:0 0 10px 35px;display: inline;">OUT:</label>
						<input class="form-control seg_out" id="segout" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
					</div>

					<div class="form-group" style="display: inline;">
						<label id="seg-dur[]" style="margin:0 0 10px 35px;display: inline;">Duration:</label>
						<output class="form-control seg_out" form="seg" name="z" for="segin segout" style="margin:0 0 10px 5px;Width:15%;display:inline" ; readonly></output>
					</div>
				</div>
			</div>
		</div>

		<div style="text-align:right;">
			<div style="display:inline;text-align: right;">
				<button onclick="deleteMe(); subtractNumSeg();" type="button" style="height: 25px;width:14px;" id="less_fields">-</button>
			</div>

			<div style="display:inline;text-align: right;">
				<button onclick="addNumSeg();" type="button" style="height: 25px;width:14px;" id="more_fields">+</button>
			</div>
		</div>
		<br><br>
		<button type="button" class="btn btn-default" id="formSubmit">Submit</button>

Answer 1

You are missing an actual segments_num element:

  <div id='segments_num' value=1></div>

in the HTML fixes this.

I also placed addNumSeg(); into the event listener to avoid asynchronous event handling issues.

var template;
		var numOfSegments = 1;

		window.addEventListener('load', function() {
			template = document.querySelector("#wrapper").innerHTML;
			document.querySelector("#more_fields").addEventListener("click", function(e) {
				e.preventDefault(); // tell the browser to not send the form
				document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
				numOfSegments = document.querySelectorAll("div.segment").length;
				document.querySelector("div.segment:last-of-type > label").innerHTML = "Day " + (numOfSegments) + ":"; //Updates Segment #
addNumSeg();
			});
		})


		function deleteMe() {
			if (numOfSegments > 1) {
				var btn = document.querySelector("#wrapper > div.segment:last-of-type");
				btn.remove();
				event.preventDefault();
			}
		}

		function addNumSeg() {
			var elem = document.getElementById("segments_num");
			elem.value = ++numOfSegments;
		}

		function subtractNumSeg() {
			var elem = document.getElementById("segments_num");
			if (numOfSegments > 1) {
				elem.value = --numOfSegments;
			}
		}

<div id='segments_num' value=1></div>
	<form id="seg" oninput="z.value=parseInt(segout.value)-parseInt(segin.value)">
		<div id="room_fileds">
			<div class="content" id="wrapper">
				<div class="segment">
					<label id="seg[]" style="margin:0 0 10px 60px;display: inline;">Day 1:</label>
					<div class="form-group" style="display: inline;">
						<label id=seg-in[] style="margin:0 0 10px 35px;display: inline;">IN:</label>
						<input class="form-control seg_in" id="segin" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
					</div>
					<div class="form-group" style="display: inline;">
						<label id=seg-out[] style="margin:0 0 10px 35px;display: inline;">OUT:</label>
						<input class="form-control seg_out" id="segout" type="text" style="margin:0 0 10px 5px;Width:15%;display: inline;">
					</div>

					<div class="form-group" style="display: inline;">
						<label id="seg-dur[]" style="margin:0 0 10px 35px;display: inline;">Duration:</label>
						<output class="form-control seg_out" form="seg" name="z" for="segin segout" style="margin:0 0 10px 5px;Width:15%;display:inline" ; readonly></output>
					</div>
				</div>
			</div>
		</div>

		<div style="text-align:right;">
			<div style="display:inline;text-align: right;">
				<button onclick="deleteMe(); subtractNumSeg();" type="button" style="height: 25px;width:14px;" id="less_fields">-</button>
			</div>

			<div style="display:inline;text-align: right;">
				<button type="button" style="height: 25px;width:14px;" id="more_fields">+</button>
			</div>
		</div>
		<br><br>
		<button type="button" class="btn btn-default" id="formSubmit">Submit</button>