使用Jquery显示不同输入的唯一ID /类增量

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);

});