Any Javascript coder can help?

[eluser]srpurdy[/eluser]
Below is a script that is creating 2 boxes when you push the add button,
My Problem is when I add 2 new boxes anything entered into the first 2 gets ereasd. I don't really know javascript that well, at all really lol. Wondering if anyone knows how I can prevent that data from being erased?

Another issue I'm having is below but not as important.

Code:

[removed]<!--


    $(document).ready(function(){

    var counter = 2;
    $("#add").click(function () {
    if(counter==41){
        alert("Too many boxes");
        return false;
    }    
        $("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' >&lt;input type='textbox' style='width:350px;' name='corners[]' id='t"+counter+"' &gt;&lt;br/>&lt;textarea name='info[]' style='width:350px; height: 350px;' id='t"+counter+"'&gt;&lt;/textarea></div>\n");
        ++counter;
    });

    $("#remove").click(function () {
    if(counter==1){
        alert("Can u see any boxes");
        return false;
    }    
        --counter;
        $("#d"+counter).remove();
    });
  });
// --&gt;[removed]

Code:

<div id='textBoxes'>
            <label>Corners:</label><br />
            &lt;input style='width:350px;' type="text" name="corners[]" value=""/&gt;&lt;br />
            &lt;textarea style='width:350px; height: 350px;'name="info[]"&gt;&lt;/textarea><br /><br />
</div><br />
&lt;input type='button' value='add' id='add'&gt;
&lt;input type='button' value='remove' id='remove'&gt;&lt;br /><br />
<p><img src="nothing.gif" name="pictures" /></p>

Ok the second issue. Is this is an array of data being place into two fields. I have an edit feature so you can go back and fix a typo whatever. When I go there I am inputing the array into they're own text boxes. Then problem I have now is Say I want to remove one section of the array. I cannot remove anything, Even though those boxes exist. If I add a new one I beleive it is starting the array from the begining. Isntead of starting at the next one. I'm sure this is both a php problem as well as javascript problem

Below is the code, I took out the Add Remove buttons since they were useless.

Code:

<?
$this->db->where('id', $this->uri->segment(4));
$row = $this->db->get('basic_reviews');
$row = $row->row();
$corners = $row->corners;
$corners = unserialize($corners);
$info = $row->info;
$info = unserialize($info);
?>
<?php foreach($corners as $key => $value) : ?>
<?php if($value == "" || $value == " " || is_null($value)) : ?>
<?unset($corners[$key]); ?>
<?php endif;?>
<?php endforeach;?>
&lt;?php for($i = 0; $i < count($corners); $i++) : ?&gt;
            &lt;input type="text" style='width:350px;' name="corners[]" value="&lt;?=$corners[$i]?&gt;"/&gt;&lt;br />
            &lt;textarea style='width:350px; height: 350px;' name="info[]"&gt;&lt;?=$info[$i]?&gt;&lt;/textarea&gt;&lt;br />
&lt;?php endfor; ?&gt;

Any help would be appricated.

I know I'm breaking all the MVC rules but im still learning lol.
Shawn

[eluser]lifo101[/eluser]
To answer your first question, The reason the text boxes disappear is because of the way you're inserting the new boxes by using $.html() + 'more html'. That will cause the browser to erase the content that was there and recreate it with the text you're passing in.

Lookup the $.after() function on jquery's site to append your new textboxes after the last one found.

for example:

Code:

var counter = 2;
$("#add").click(function () {
    if(counter==41){
        alert("Too many boxes");
        return false;
    }

    $("#textBoxes").append("<div id='d"+counter+"' >&lt;input type='textbox' style='width:350px;' name='corners[]' id='t"+counter+"' &gt;&lt;br/>&lt;textarea name='info[]' style='width:350px; height: 350px;' id='t"+counter+"'&gt;&lt;/textarea></div>\n");

    ++counter;
});

[eluser]srpurdy[/eluser]
Cool thanks man, That worked

I fixed part of my second issue by using the code below

Code:

&lt;?php for($i = 0; $i < count($corners); $i++) : ?&gt;
            &lt;input type="text" style='width:350px;' name="corners[&lt;?=$i?&gt;]" value="&lt;?=$corners[$i]?&gt;"/&gt;&lt;br />
            &lt;textarea style='width:350px; height: 350px;' name="info[&lt;?=$i?&gt;]"&gt;&lt;?=$info[$i]?&gt;&lt;/textarea&gt;&lt;br />
&lt;?php endfor; ?&gt;
<div id='textBoxes'>
</div>

I added

Code:

<?=$i?>

To both name= inside the array value.
And added the textboxs div below, and add, remove buttons.

I can add a new array values and keep them in order. However I can only remove new ones I add at that point not existing ones. Anyone got a solution for removing existing boxes ?