We Keep Coding

How to avoid duplicate tags (id) being generated when new rows are added to HTML table using jQuery at runtime

At the outset I wish to put on record that I am not sure as to what I am going to ask makes for a proper question as per SO standards. However, here it goes:
I have an HTML table where rows can be added using jQuery during runtime. The number of columns are a reflection of the underlying table fields. In addition to the table fields, I have two extra cells (tds) which are being used for:
Displaying the row number
A Delete link to remove the (respective) row
I am generating ids as each new row is being added dynamically. Also, as the new rows are being added, the row number (in the very first cell of the row) is being updated to the next higher number.
All was going as required only then I realized that if the number of additional rows goes beyond a certain value, the row number input box in a particular row is blank and the next row onwards, the numbering continues until a particular row in the next cycles is reached.
As an example, the row numbering continues from 1 till 10, then in the next row misses 11 (as it should have been). If I continue adding more rows, row numbers continue from 12 until 21 (21 goes missing again) and so on. On studying the ids, I realized that the last cell of the first row incidentally has exact the same id as the first cell of the 11th row. So, if my generated id for the first cell of the 11th row is id_tIndx111, the last cell of the first row also has the same id i.e. id_tIndx111. (My head is spinning by now!!)
An illustration of the IDs being generated:
11th row, first cell: id_tIndx111 1st row, last cell: id_tIndx111
21st row, first cell: id_tIndx211 2nd row, last cell: id_tIndx211
The reason for the missing row number is of course due to duplicate ids being encountered by the browser.
So, what I tried to overcome this malady, is to reduce the number of fields in the underlying table by 1. And the problem of missing row number seems to have been taken care of!(?)
My question is : What should be the approach under such situations? Because I will not be always at liberty to keep the number of fields in tables to a certain number. And using a table with more than 10 fields will have the issue I have just described.
Thanks for going through the above.

I beileve you are generating the id yourself. You can restructure your id. Something like this,
id_tIndx1_11
In that case id_tIndx1_11 and id_tIndx11_1 will not be identical. That would solve your problem. If you could add the code for id generation we could help you more preciesly.

Best way to totalise dynamically created table row and column values using Javascript?

I've to create a table with a row of input boxes.
The values entered in will then be multiplied by script and the answer placed in the last input box, the row total, if you will.
There is a button above the table to add another row.
Each time a row is added, the same input boxes need to appear, and the same 'row script' to calculate the row total.
Once a particular row has been added/updated, and it's row total calculated, a final number needs to be found, which is essentially the total of the row totals. Let's call it the column total.
My skills aren't super high, am learning as I go, especially from the decent responses this site seems to attract. One hopes this is at least understandable....
I've managed to get row to be added by a button using table.insertrow, and the scripts for doing the math are no problem. I have also managed to use a simple loop to create the dynamic variable names for each input box; named the same and numbered by row.
Where I'm stuck is generating the scripts to totalise a line and then another tot totalise the table, as the script needs to factor in how many rows there are, and I can't see how to write this except using Eval() (so far..).
I've also experimented a little with this and each but just got bogged down and could no longer see the logical flow.
What I've written to date is now just a mess.
Instead of posting code for comment/fix, I seek to better understand which way to address the problem using Javascript if at all possible, hopefully without using Eval().
Any suggestions would be welcomed by this brain-dead, gone bleary, wishing he hadn't started, noob.
UPDATE: Have seen a lot of ways to use JQuery, but it's not for me at the moment.
perhaps phrased differently - how in javascript would you loop through a table column, adding up all of the cell contents (numbers) in that column, please. I can't seem to figure out how to use Each as the variable names are different (numbered) per row.

Something like this:
var tr = document.createElement("<tr>");
var td = document.createElement("<td>");
tr.appendChild(td);
You have to create table row, fill it with cells, cells with buttons and so on. As result you will have table row variable which you can insert every time your button clicked.

Hiding certain choices in a qualtrics matrix

I am very new to programming but have come across a situation in my work where I believe I need to use some javascript to make my survey manageable for the participant. The client wants to use Qualtrics as a scheduling system. Faculty identify time slots that they are available and the survey would start by hiding the ones that they will not be available for. Then dynamically hides buttons as the quotas fill for a given time slot.
My matrix table is 10 columns x 15 rows to accommodate all the times and days. I'm trying to reuse snips of codes that I have found online and so far have gotten to:
Qualtrics.SurveyEngine.addOnload(function()
{
$("QR~QID14~1~4").up().hide();
});
This is hiding a choice, but instead of row 1 column 4 it is hiding row 1 column 15 (whose inspect element is QR~QID14~1~10). Whatever I change my column number to (4 in the example) it is always hiding the check box in the last column. I don't understand what I am doing wrong. So I've gone into my results and realize it is hiding the correct button but the rest of the buttons are shifting left so it appears that the last button is hidden.
Once I get it to hide the correct column I want to add conditions to my code that will hide it based on the value of a quota, which I believe would look like:
Qualtrics.SurveyEngine.addOnload(function()
{
if ('${qo://QUOTAID/QuotaCount}' > 0) $("QR~QID14~1~4").up().hide();
});
Where I would find the QUOTAID via Qualtric's piped text option
I know I can format this as a list but there are too many options for some faculty to make that look right.

You want to hide the contents of the table cell, not the cell itself.
Qualtrics.SurveyEngine.addOnload(function() {
$('QR~QID14~1~4').up('td').childElements().invoke('hide');
});

OfficeJs/WordJs select text range by index and bind click event

First, Using OfficeJS/WordJS how can I select text in a paragraph by index and length. For example, my paragraph has 100 characters and I need to select all from index 2 till index 16.
Second, When I found this range - how I can add an event handler for this range? I mean, when user click at 2-16 chars in my paragraph - I will show some useful information in my Add-in.
I'm using Word 2016 Add-in.
Thanks!

I recommend you to explore the Range functionalities we added as part of the 1.3 update who is in preview right now. Please follow the instructions here on how to try the preview. please explore the added Range object functionalities (all whose Req set are 1.3 in the last column)
Please explore the "split" functionality who enables you to split a paragraph into chunks of ranges when a set of delimiters is provided. For instance you can specify a space (" ") delimiter and get all the words in that paragraph. Check this example (exercise 7 on the lab) that splits a paragraph into words.
In conjunction with the split functionality, you can use getRange and expandTo methods to expand a range. (so you get from index 'x' to 'y'
on your second question. Once you have the range, you can wrap it with a titled content control (range.insertContentControl and then specify a title for it), so that you can use the Office.context.bindings.addToNamedItemAsync API to create a Textbinding and subscribe to the BindingSelected event, as shown on this example.
Hope this guides you in the right direction.

Getting specific td content

Is it possible to get just one specific td's text from a page? On the last table I want to get the number of members joined this month so far to use on another page.
Note: It always shows only 12 rows and the current month is the last one.
http://pastebin.com/xGvQMuvp
I don't have access to the page itself or I'd know how to grab this easily by adding an id to that specific <td>.
Above is all the code for the page I simply copied from using inspect element. If you scroll to the bottom where it has October 2014 and then 150, I want to get the 150.
It's the 11th table, 14th <tr>, 2nd <td>.

You probably need a "userscript". Different browsers have different ways of letting a user write JavaScript that can do things like inspect a loaded-up web page; you would need to see how your browser lets you do it. Then, if you are always looking for the same table and the same table row, in a particular page, the task might be relatively easy.

I actually found the answer to what I needed using the nth-child expression like #dandavis suggested to grab the whole page and then show/hide what I needed to.

Here's how you can do it:
//Get <table> number 11
var table = document.getElementsByTagName("table")[10];
//Get <tr> number 14
var tr = table.getElementsByTagName("tr")[13];
//Get <td> number 2
var td = tr.getElementsByTagName("td")[1];
//Get text content
var text = td.getElementsByTagName("span")[0].innerHTML;
console.log(text); // => 150