Develop Reference

not able to delete a table row created by jquery, the code is creating extra unnecessary columns

I have a function to append table rows whenever a user selects values from checkbox popup window. If the user selects same or different check box values , the old values should be deleted. My code is not deleting/replacing the old row and somehow it deletes the name of the old row and creates extra table data values.
https://imgur.com/JjQjTaW
In this case, the second circled table row should have replaced the first circled row.
function AppendSampleTable(specimenNumberTextBoxId, specimenArray, _combinatedIdForSampleTbl) {
// var specimenNumberTextBoxId = "MOLECULAR DIAGNOSTICSSpec1";
var sampleTable = document.getElementById('ctl00_ContentPlaceHolder1_tblSample');
// var sampleTable = document.getElementById('ctl00_ContentPlaceHolder1_sampleNum6');
var specimenType = document.getElementById(specimenNumberTextBoxId).getAttribute("specimentype");
var poolSpecimenCode = document.getElementById(specimenNumberTextBoxId).getAttribute("poolspecimen");
var specimenNumber = "test";
var tableRows = $(sampleTable).find('tr');
var rowIndex = tableRows.length;
var i = 0;
var newRow;
var specimenArrayLength = specimenArray.length - 1; // Because specimenArray contains empty string for first element.
// Erase tr that has same name as requested.
var $oldRow = $(sampleTable).find('tr[name="' + _combinatedIdForSampleTbl + '"]'); //WHY IS THIS NOT WORKING OR IS IT? SHOUDL IT REMOVE OLD ROWS?// 3/28/2019
alert("old row=" + $oldRow);
$oldRow.remove();
// Append tr that contains desired values.
for (i; i < specimenArrayLength; i++) {
// If none of specimen has choosen for a pool, array will contain 'undefined', so we need to ignore that not to be appended into table.
if (specimenArray[i + 1] != undefined) {
specimenNumber = specimenArray[i + 1];
newRow = "<tr name='" + _combinatedIdForSampleTbl + "'><td class='col-xs-2'><span id='ctl00_ContentPlaceHolder1_sampleName" + (rowIndex + i + 1) + "' specimenCode='" + poolSpecimenCode + "'>POOL - " + specimenType + "</span></td><td class='col-xs-2'><span id='ctl00_ContentPlaceHolder1_sampleNum" + (rowIndex + i + 1) + "'>" + specimenNumber + "</span></td></tr>";
$(sampleTable).append(newRow);
}
}
}
I expect my code to replace the old row and not have extra empty table data values.

How to get the variable value after the $getJSON?

In the code below, I have a function counter which counts element. I use the counter function in order to count the elements that I have in the JSON file. My question is how can I get the value of the counter after the $getJSON, and why when I console log the counter outside of the brackets I keep on getting undefined, why it does not remember the last value, while if I console log the counter inside the brackets I get the number of elements in the JSON file. I want to get the number of elements so afterwards I can use that number in the for loop below.
// global variables
var c = 0;
var a;
var b;
// counter function
function counter() {
return c++;
}
// document ready function
$(document).ready(function () {
$.getJSON("https://graph.facebook.com/v3.2/...", function (data) {
var items = [];
$.each(data.data, function (i, obj) {
//$('#target').append($('<div/>', { id: 'dummy' + i }))
var text = '<p class="review_text">' + obj.review_text + '</p>'
var date = '<p class="date">' + obj.created_time + '</p>'
a = counter();
$("#carousel").find("[data-index='" + i + "']").append(text, date)
console.log(a) //here I get the number of elements inside the JSON file
});
});
console.log(a) //but if I put the console log here, I get undefined instead of the number
var wrapper = document.getElementById("carousel");
var myHTML = '';
for (b = 0; b <= a; b++) { //here I want to use what the function returns, so if I have 10 elements in the JSON file I can create 10 div elements in the HTML, it works only if I put number instead of 'a' but I want to use 'a' so I do not have to count the elements as well, the elements will increase.
myHTML += '<div id="review" data-index=' + (b) + '></div>';
}
wrapper.innerHTML = myHTML
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Move the code inside the ajax call so that it executes AFTER the data is returned/processed:
$(document).ready(function () {
$.getJSON("https://graph.facebook.com/v3.2/...", function (data) {
var items = [];
$.each(data.data, function (i, obj) {
//$('#target').append($('<div/>', { id: 'dummy' + i }))
var text = '<p class="review_text">' + obj.review_text + '</p>'
var date = '<p class="date">' + obj.created_time + '</p>'
a = counter();
$("#carousel").find("[data-index='" + i + "']").append(text, date)
console.log(a) //here I get the number of elements inside the JSON file
});
console.log(a) //but if I put the console log here, I get undefined instead of the number
var wrapper = document.getElementById("carousel");
var myHTML = '';
for (b = 0; b <= a; b++) { //here I want to use what the function returns, so if I have 10 elements in the JSON file I can create 10 div elements in the HTML, it works only if I put number instead of 'a' but I want to use 'a' so I do not have to count the elements as well, the elements will increase.
myHTML += '<div id="review" data-index=' + (b) + '></div>';
}
wrapper.innerHTML = myHTML;
});
});

Saving dynamic fields to the database - javascript

I want to save the text and select inputs I have added with Append to the database. How do I get the value of the dynamically added select and input fields?
http://jsfiddle.net/qBURS/1848/
function register() {
var count = document.getElementById("buildyourform").childElementCount;
for (var i = 0; i < count; i++) {
}
alert(count);
}

using $( 'form').serializeArray() you can get array of input and select values
Demo : http://jsfiddle.net/qBURS/1849/
$('#register').click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");
});
});

If-Else not working as expected if found matching element in array

I have a form where user can fill details and on clicking of add attendee button can add up to 9 people details. I am getting value of user name, selected checkbox item id and item quantity and storing inside array and passing these values in URL to add selected items and created user. On first click I'm checking if item is already there in array.
On first click I'm adding id's and quantity in array what I want to achieve is to increase quantity of that id which is already present in array, each time i click on this button it checks array and update quantity if its already present but its not working.
Here is my code
jQuery("#btnadd2").click(function() {
var qty;
var allVals = [];
var nameatt = jQuery("#txtAttendeeNames").val();
var nameatt= jQuery("#txtAttendeeNames").val();
var emattendee= jQuery("#txtAttendeeEmails").val();
var eventname = jQuery("#hdEventName").val();
var eventlocation = jQuery("#hdLocation").val();
jQuery(".big:checked").each(function() {
qty = parseInt(jQuery(this).parents().nextAll().children().find('input[name="quantity"]').val());
if (jQuery.inArray(jQuery(this).val(), allVals) == -1) {
allVals.push(jQuery(this).val()); //not present in array
} else {
qty = parseInt(jQuery(this).parents().nextAll().children().find('input[name="quantity"]').val() + 1);
}
});
for (var i = 0; i < allVals.length; i++) {
var rslt = allVals.join(',' + qty + ',' + 'custcol_name_of_attendees|' + nameatt + '||custcol_email_o f_attendees|' + emattendee + '||custcol_event_name|' + eventname + '||custcol_event_location|' + eventlocation + ';');
rslt1 = jQuery('#txtCntNameReg').val(rslt);
console.log(rslt1);
}
});

Try this line:
qty = qty + 1;
instead of this,
qty = parseInt(jQuery(this).parents().nextAll().children().find('input[name="quantity"]').val() + 1);
in else condition.

how to get Id of row when pop up option click (got Id using global variable)?

can you please tell me how to get Id of row when pop up option click ?I generated the row dynamically when "add" button is press.on Row there is an icon ":" ,on click of icon it show pop up screen When I click "edit" or other option I want to show Id of row on which it it open .I am able to get event of edit .But not able to get id.
http://jsfiddle.net/4ajeB/5/
function createTestCase(testCaseName, iscreatedFromScript, jsonObject) {
var id;
if (typeof ($("#testCaseContainer li:last").attr('id')) == 'undefined') {
id = "tc_1";
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
} else {
id = $("#testCaseContainer li:last").attr('id');
var index = id.indexOf("_");
var count = id.substring(index + 1, id.length);
count = parseInt(count);
var conunter = count;
id = id.substring(0, index) + "_" + parseInt(count + 1);
}
var html = '<div class="testcaselist_row">' + '<ul>' + '<li id="' + id + '" class="clickTestCaseRow">' + id + '<i class="icon1 test_h"></i></li>' + '</ul></div>';
$('#testCaseContainer').append(html).enhanceWithin();
}
$('.edit_h').click(function(){
alert("edit"+$(this).id)
})
I got the ID using global variable.Can it is possible to get ID without using variable ?

Just add the ID to the .edit_h as data, and access it in the click event.
...
$('.edit_h').data('originalId', id);
$('#testCaseContainer').append(html).enhanceWithin();
}
$('.edit_h').click(function(){
alert("edit ID:"+$(this).data('originalId'));
})
Updated fiddle: http://jsfiddle.net/4ajeB/6/