We Keep Coding

Creating elements with javascript/php, need to get their unique ID and send it back to PHP

I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute.
Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.)
I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id.
Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that.
obj.returnIntJson holds the integer that I've been talking about, which changes for each row.
rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it.
The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div>
Suggestions on how to proceed? Here's the code for one of the divs,
Thanks.
qaRowQuestion = document.createElement('div');
qaRowQuestion.setAttribute('id', "questioncolumn");
qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson);
qaRowQuestion.setAttribute('class',"questionColumnCSS");
qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer);
qaRowQuestionParent.appendChild(qaRowQuestion);

This script worked:
$(document).on("click", ".questionColumnCSS",function() {
var questionUpdate = ($(this).data('integer-question'));
});

Get Updated HTML String After Clone with jQuery

I'm building an application which has a D&D editor and deal with layouts (based on bootstrap) and multiple widgets.
Each widget has various parameters which are editable with a modal after clicking on the corresponding widget edit link.
I pass in the html generating the form elements for these params, base64 encoded through a data attribute like this:
Edit
I grab that string, decode it and append it to the modal box which spits out the form. This all works perfectly fine. As a sidenote, before I was just spitting out the form elements in a hidden div within each widget container, then grabbing it from there. The result was 75K elements in dom with a very few number of widgets and a 3 second delay on any click event, plus a generally sluggish interface (as you can imagine).
Upon clicking the save button for the widget, I need to get the html of the form elements that were appended to the modal WITH the updated values, encode it and update the widget data attribute with the new string.
That part works fine, but what doesn't is upon clicking the save button, it clones the modal form elements. That object which contains the originally appended form markup has the correct, updated values for each form element.
For example:
var tab_general = $('#modal-widget-CSS-Params-tab_general');
var test_update_value = tab_general.find('input[name="widget-videofakeout[1371898762][content]"]').val();
console.log(test_update_value);
The result is the proper updated value, so I know the it has the proper data that I want inside.
But if I create a new dom element with the by cloning this object and attempt to use jQuery's html method to get the new, updated html string of said clone, like so:
console.log($('<div>').append(tab_general.clone(true, true)).remove().html());
All I get is the original appended html with the original input values.
So my question is, is there any way to get the html string of a cloned object with the updated input values? Or am I going about this all wrong?
Here's a very basic example of what I'm trying to do, but as per the first comment below, it seems I'm totally off-base: http://jsfiddle.net/6LyMK/2/

jQuery selector for next div by class in a table cell

I have tried many things but none seem to work.
What I am trying to do is create a database that will store serial numbers for all the stock I receive, I can get the basic functions to work.
Within the HTML I have a Javascript function that adds extra serial number fields according to the qty input.
My only problem is that when I add another product field to the table and change its qty field, it adds the extra fields to all of the serial number cells.
All I need is help with finding the right selector for the next div with the class ".serials".
jsFiddle:
http://jsfiddle.net/AvKRW/10/
$(".serials").append("<input type='text' name='serial[]' id='serial-number' /><br />");

The issue is that you are finding all elements with the specified class and appending to all of them.
Are you looking for:
$(".serials").last ()
Alternatively you could use
$(".serials").eq (INDEX)
The latter should enable you to append to only one of the serial boxes based on index.
It appears that parsing the dom tree of html elements would allow you to filter your selection of html elements to just the few you require. please see changes I have made to your jsfiddle:
http://jsfiddle.net/AvKRW/7/

getting a list of id's for elements in a html document

So i have this html:
<select id="CompanyMultiSelect" name="CompanyMultiSelect" multiple="multiple">
</select>
and i have JavaScript that dynamically fills it up with data. The data is filled with, among other things, inputs that have id's. They are generated dynamically, so i don't know them until the page is loaded.
i need to select the id of all the inputs within the select so that i can parse their values to another location, and i want to do it with either JS or jQuery.
how would i go about selecting all ids as an array to use later on?
EDIT1:
The select segment is a placeholder for a plugin that creates a dropdown menu filled with checkboxes, so the fact that inputs are within a select shouldn't bother you :)

Suppose you already have a jquery, so you can do something like this:
var ids = [];
$("parent_element_selector").find("input[type=checkbox]").each(function(){
ids.push(this.id);
});
//here ids will be filled with ids of checkboxes.
Please note that parent_element_selector can't be #CompanyMultiSelect as select element can't contain inputs, so your plugin will create a new wrapper element. You need to figure out how you can get it with firebug or dev tools

getElementsByTagName returns an array of elements.

premade yet to be showed HTML elements?

lets say i've a form and in this form i would like to duplicate properties elements. now every property element is a div which contains some input elements. every time the user click on a button "add properties" i would like it to create another instance of this properties element
the question is where should i store these pre-made and yet to be shown to the user elements, in a way it would be easy to later modify it?
i'm using JS with jquery.

Will at least one property element already exist on the page?
If so, simply select it, clone it and store it for later use.
var el = $('.your-element').html().clone();
Then later you can make copies of it.
If your element doesn't exist on the page yet. You can still put it on the page in a div that isn't displayed and do the same strategy as above. Or use a "template" format such as jQuery templates.

I store them in a hidden template div at the bottom of the form like so:
<div id="field_template" style="display:none;">
<input type="text" name="prop_tpl" id="prop_tpl">
</div>
When the time comes to display it, I duplicate it in jQuery and set the name and id properties to prop_1 or prop_2 etc based on a counter of added fields.