Function not renaming field pulled from another page - php

Question

I have a form which is cloned when needed, inside this form I have a div, this div is replaced by a div pulled from another page which has new select options based on a select option from a above field.
Each 'cloned' forms fields are given a new name with a function, but this function seems to have trouble seeing the field that is pulled in as part of the form and isn't generating a new name for it.
Could Someone kind enough show me the way please?
function;
$(document).ready(function() {
var newNum = 2;
cloneMe = function(el) {
var newElem = el.clone().attr('id', 'container' + newNum);
newElem.html(newElem.html().replace(/form\[1\]/g, 'form['+newNum+']'));
newElem.html(newElem.html().replace(/id="(.*?)"/g, 'id="1'+newNum+'"'));
$('#cloneb').before(newElem);
$('#delete_name'+ newNum).html('<p id="rem_field"><span>Delete Line</span></p>');
newNum++;
};
$('p#rem_field').live('click', function() {
$(this).parents('div').remove();
return false;
});
});
form;
<form action='' method='post' enctype='multipart/form-data' name='form' id='form'>
<div id="container1">
<div class="instance" id="instance">
<label>Style:</label>
<select name='form[1][style]' id='style' class='style' onchange="showDim(this)">
<option value='0' class='red'>Select a style...</option>
<?php
include ('connect.php');
$getsty = $db->prepare("SELECT Style_ID, Style_Type FROM style ORDER BY Style_Type ASC LIMIT 1, 18446744073709551615;");
$getsty->execute();
while($row = $getsty->fetch(PDO::FETCH_ASSOC)) {
$Style_ID = $row['Style_ID'];
$Style_Type = $row['Style_Type'];
echo " <option value='$Style_ID'>$Style_Type</option>";
}
?>
</select>
<br />
<div class='dimdiv'>
<label>Dimensions:</label>
<select name='form[1][Dim]' id='Dim'>
<option value='0' class='red'>Select the dimensions...</option>
</select>
</div>
<br />
<label>Colour:</label>
<select name='form[1][Colour]' id='Colour'>
<option value='0' class='red'>Select a colour...</option>
<option value='Colour1'>Colour #1</option>
<option value='Colour2'>Colour #2</option>
<option value='Colour3'>Colour #3</option>
<option value='Colour4'>Colour #4</option>
</select>
<br />
<label>Quantity:</label>
<input type='text' name='form[1][Quantity]' id='Quantity'>
<br />
</div>
<div id="delete_name" style="margin:15px 0px 0px 0px; width:120px; height:30px;"></div>
</div>
<input type="button" id="cloneb" value="Clone" onclick="cloneMe($('#container1'));" />
<input type='submit' name='submit' value='Submit' class='buttons'>
</form>
Field pulled from get_dim.php;
<label>Dimensions:</label>
<select name='form[1][Dim]' id='Dim'>
<option value='0' class="red">Select the dimensions...</option>
<?php
$id = intval($_GET['id']);
include ('connect.php');
$getcus = $db->prepare("SELECT Dim_ID, Dim FROM dimentions WHERE Style_ID=? ORDER BY Dim ASC ");
$getcus->execute(array($id));
while($row = $getcus->fetch(PDO::FETCH_ASSOC)) {
$Dim_ID = $row['Dim_ID'];
$Dim = $row['Dim'];
echo " <option value='$Dim_ID'>$Dim</option>";
}
?>
</select>
Function to replace the dimdiv with get_dim.php;
function showDim(elem)
{
var elems = document.getElementsByClassName('style'),
groupIndex = -1,
targetDimDiv,
i;
for( i = 0; i < elems.length; ++i ) {
if( elems[i] == elem ) {
groupIndex = i;
break;
}
}
if( groupIndex == -1 )
{
return;
}
targetDimDiv = document.getElementsByClassName('dimdiv')[groupIndex];
if (elem.value == "")
{
targetDimDiv.innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
targetDimDiv.innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","get_dim.php?id="+elem.value,true);
xmlhttp.send();
}

Answer 1

Your problem is, that form[1][Dim] is hard coded into get_dim.php. When you clone a form, you change the name of every element, but this AJAX request would still return a form element with name form[1][Dim] there too.
You can fix this, by reading out the current form id and passing it to get_dim.php and making the name generation there dynamic.
The parts you have to change (roughly):
replace function:
form_id = groupIndex + 1; // if I get groupIndex right
xmlhttp.open("GET","get_dim.php?id="+elem.value+"&form_id="+form_id,true);
get_dim.php:
<select name='form[<?php echo intval($_GET['form_id']); ?>][Dim]' id='Dim'>