Unique id/class increment to show different Input using Jquery - php

Question

I've got a form which currently works as a single line allowing different input fields based on the Production drop down.
i.e. If you choose CPE or CPM you get the inputs for Impressions and Targeting. If you choose Eggs2Go then you only get Impressions.
While this works so far, if I add a line and use the drop down menu it affects the first ID tag changing that line and not the new lines options.
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
document.getElementById("showTarget").style.display = "block";
document.getElementById("showImpressions").style.display = "none";
}
else if (that.value == "EGGS") {
document.getElementById("showImpressions").style.display = "block";
document.getElementById("showTarget").style.display = "none";
}
else {
document.getElementById("showTarget").style.display = "none";
document.getElementById("showImpressions").style.display = "none";
}
}
Is there a way I can give an auto increment to each new line so that the showTarget and ShowImpressions act individually?
Details in the fiddle

Answer 1

You can't repeat ID's in a page, they must be unique by definition.
The common approach to repeating rows like this is to use common classes for like elements and isolate instances within your event handlers by looking up to parent row element and then looking inside that specific row for needed elements
Assume we change all the repeating ID's to same class name you would then do something like the following in jQuery
$('#tableContainer').on('change', 'select', function(e){
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
// flags for toggling various classes
showImpressions = false,
showTarget = false;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
}
// other conditionals to set flags based on other values
// now toggle display of instances of classes within row instance
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
});

Answer 2

As mentioned by charlietfl, ids are unique.
Using your existing coding format
Change all id to class
Find the second parentNodes of your select tag
Once the main parentNode is Found, find your siblings input boxes that you need to change
Snippet below
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<select name="products" onchange="showTargetCheck(this);">' +
'<option>Select one</option>' +
'<option disabled>---</option>' +
'<option value="PRODUCTION">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
'<div class="showImpressions" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="showTarget" style="display: none;">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
#tableContainer {
display: table;
}
.tableRow {
display: table-row;
}
.tableLeft,
.tableRight,
.tableMiddle {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function showTargetCheck(that) {
if (that.value == "CPM" || that.value == "CPE" || that.value == "SWIFT") {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
} else if (that.value == "EGGS") {
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "block";
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
} else {
that.parentNode.parentNode.getElementsByClassName("showTarget")[0].style.display = "none";
that.parentNode.parentNode.getElementsByClassName("showImpressions")[0].style.display = "none";
}
}
</script>
<!-- IO Table -->
<div id="tableContainer">
<!-- IO Row -->
<div class="tableRow">
<!-- Start Date -->
<div class="tableLeft">
<h4>Start</h4>
<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">
</div>
<div class="tableMiddle">
<h4>End</h4>
<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">
</div>
<!-- End Date -->
<!-- Products -->
<div class="tableMiddle">
<h4>Products</h4>
<select name="products" onchange="showTargetCheck(this);">
<option>Select one</option>
<option disabled>---</option>
<option value="PRODUCTION">Production</option>
<option value="CPE">CPE</option>
<option value="CPM">CPM</option>
<option value="SWIFT">Swift</option>
<option value="EGGS">Eggs2Go</option>
</select>
</div>
<!-- Products -->
<!-- Show Impressions Only -->
<div class="showImpressions" style="display: none;">
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Impressions Only -->
<!-- Show Targeting & Impressions -->
<div class="showTarget" style="display: none;">
<div class="tableMiddle">
<h4>Targeting</h4>
<input type="text" placeholder="Targeting">
</div>
<div class="tableMiddle">
<h4>Impressions</h4>
<input type="number" placeholder="1000" class="imps">
</div>
</div>
<!-- Show Targeting & Impressions -->
<!-- Rates -->
<div class="tableMiddle">
<h4>Rate</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="rates">
</span>
</div>
<!-- Rates -->
<!-- Gross Cost -->
<div class="tableMiddle">
<h4>Gross</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="grosscost">
</span>
</div>
<!-- Gross Cost -->
<!-- Net Cost -->
<div class="tableMiddle">
<h4>Net</h4>
<span class="input-symbol-dollar">
<input type="number" placeholder="0.00" min="0.01" class="netcost">
</span>
</div>
<!-- Net Cost -->
<!-- Notes -->
<div class="tableRight">
<h4>Notes</h4>
<input type="text" placeholder="Notes" class="notes">
</div>
<!-- Notes -->
</div>
<!-- IO Row -->
</div>
<!-- ADD NEW IO LINE -->
<div id="IOLine"></div>
<button type="button" id="addNewIOLine">+ Add New Line</button>
<!-- ADD NEW IO LINE -->

Answer 3

(Posted on behalf of the OP).
Working version here if anyone needs the reference:
/*
Toggle Impressions and Targeting Fields
*/
$('#tableContainer').on('change', 'select', function(e) {
// get row instance starting from `this`
var $row = $(this).closest('.tableRow'),
currVal = $(this).val(),
showImpressions = true,
showTarget = true,
showDefault = true;
if (currVal == "CPM" || currVal == "CPE" || currVal == "SWIFT") {
showTarget = true;
showImpressions = false;
showDefault = false;
} else if (currVal == "EGGS") {
showImpressions = true;
showTarget = false;
showDefault = false;
} else if (currVal == "DEFAULT" || currVal == "") {
showDefault = true;
showTarget = false;
showImpressions = false;
}
// other conditionals to set flags
// now toggle instances of classes within row
$row.find('.showTarget').toggle(showTarget);
$row.find('.showImpressions').toggle(showImpressions);
$row.find('.showDefault').toggle(showDefault);
});
/*
New IO Line
*/
$('#addNewIOLine').click(function() {
$('#IOLine').append(
'<div class="tableRow">' +
/* DATES */
'<div class="tableLeft">' +
'<input type="date" name="startDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="date" name="endDate" placeholder="MM/DD/YYYY" class="date">' +
'</div>' +
/* PRODUCTS */
'<div class="tableMiddle">' +
'<select name="products">' +
'<option value="DEFAULT">Production</option>' +
'<option value="CPE">CPE</option>' +
'<option value="CPM">CPM</option>' +
'<option value="SWIFT">Swift</option>' +
'<option value="EGGS">Eggs2Go</option>' +
'</select>' +
'</div>' +
/* Show Default */
'<div class="showDefault">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="N/A" class="imps" disabled>' +
'</div>' +
'</div>' +
/* Show Impressions Only */
'<div class="showImpressions">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="N/A" disabled>' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* Show Targeting & Impressions */
'<div class="showTarget">' +
'<div class="tableMiddle">' +
'<input type="text" placeholder="Targeting">' +
'</div>' +
'<div class="tableMiddle">' +
'<input type="number" placeholder="1000" class="imps">' +
'</div>' +
'</div>' +
/* RATES */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="rates">' +
'</span>' +
'</div>' +
/* GROSS COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="grosscost">' +
'</span>' +
'</div>' +
/* NET COST */
'<div class="tableMiddle">' +
'<span class="input-symbol-dollar">' +
'<input type="number" placeholder="0.00" min="0.01" class="netcost">' +
'</span>' +
'</div>' +
/* NOTES */
'<div class="tableRight">' +
'<input type="text" placeholder="Notes" class="notes">' +
'</div>' +
'</div>');
});
http://jsfiddle.net/16godohe/9/.