Multidimensional input with codeigniter not setting second array correct

Question

On my controller function get form I get my banner images and I also use multidimensional array in my view

For some reason, the second banner_image title not showing but the value has been placed on the first array instead?

print_r($_POST)

Question How am I able to make sure that no matter how many banner images I select it can set the multidimensional array correct for each post.

public function getForm()
{
    $banner_id = $this->uri->segment(5);

    if ($banner_id)
    {
        $data['action'] = 'admin/design/banners/edit/' . $banner_id;
    } else {
        $data['action'] = 'admin/design/banners/add';
    }

    $banner_info =  $this->admin_model_banner->getBanner($banner_id);

    if ($this->input->post('banner_name')) {
        $data['banner_name'] = $this->input->post('banner_name');
    } elseif (!empty($banner_info)) {
        $data['banner_name'] = $banner_info['banner_name'];
    } else {
        $data['banner_name'] = '';
    }

    if ($this->input->post('banner_status')) {
        $data['banner_status'] = $this->input->post('banner_status');
    } elseif (!empty($banner_info)) {
        $data['banner_status'] = $banner_info['status'];
    } else {
        $data['banner_status'] = '';
    }

    $banner_images = array();

    $banner_images_post = $this->input->post('banner_image');

    if (isset($banner_images_post)) {
        $banner_images = $this->input->post('banner_image');
    } elseif (isset($banner_id)) {
        $banner_images = $this->admin_model_banner->getBannerImages($banner_id);
    } 

    $data['banner_images'] = array();

    foreach ($banner_images as $banner_image)
    {
        if (is_file(FCPATH  . 'image/' . $banner_image['image'])) {
            $image = $banner_image['image'];
            $thumb = $banner_image['image'];
        } else {
            $image = '';
            $thumb = 'catalog/no_image.jpg';
        }

        $data['banner_images'][] = array(
            'image' => $image,
            'thumb' => $this->model_tool_image->resize($thumb, 100, 100),
            'title' => $banner_image['title'],
            'sort_order' => $banner_image['sort_order']
        );
    }

    $data['placeholder'] = $this->model_tool_image->resize('catalog/no_image.jpg', 100, 100);

    $data['header'] = Modules::run('admin/common/header/index');
    $data['footer'] = Modules::run('admin/common/footer/index');

    $this->load->view('design/banner_form_view', $data);
}

View

<?php echo $header;?>
<div class="container">

<?php 

$form = array(
    'id' => '',
    'role' => 'form',
    'class' => 'form-horizontal'
);

echo form_open_multipart($action, $form);?>

<div class="panel panel-default">
<div class="panel-heading"></div>

<div class="panel-body">

<div class="form-group">
<label class="col-lg-2">Banner Status</label>
<div class="col-lg-10">
<input type="text" name="banner_name" class="form-control" placeholder="Enter Banner Name" value="<?php echo $banner_name;?>" size="50"/>   
<?php echo form_error('banner_name', '<div class="text-danger" style="margin-top: 2rem;">', '</div>'); ?>
</div>
</div>

<div class="form-group">
<label class="col-lg-2">Banner Name</label>
<div class="col-lg-10">
<?php 

$options = array('1' => 'Enabled', '0' => 'Disabled');

echo form_dropdown('banner_status', $options, $banner_status, array('class' => 'form-control'));

?>

</div>
</div>

<table id="images" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-left">Title</td>
<td class="text-left">Image</td>
<td>Sort Order</td>

</tr>
</thead>
<tbody>
<?php $image_row = 0; ?>
<?php foreach ($banner_images as $banner_image) { ?>
<tr id="image-row<?php echo $image_row; ?>">
<td class="text-left">
<input type="text" name="banner_image[<?php echo $image_row; ?>][title]" value="<?php echo $banner_image['title']; ?>" class="form-control">
</td>
<td class="text-left">
<a href="" id="thumb_image_<?php echo $image_row; ?>" data-toggle="image" class="img-thumbnail">
<img src="<?php echo $banner_image['thumb']; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" />
</a>
<input type="hidden" name="banner_image[<?php echo $image_row; ?>][image]" value="<?php echo $banner_image['image']; ?>" id="input_image_<?php echo $image_row; ?>" /></td>
<td class="text-right"><input type="text" name="banner_image[<?php echo $image_row; ?>][sort_order]" value="<?php echo $banner_image['sort_order']; ?>" placeholder="Sort Order" class="form-control" /></td>
<td class="text-left">
<button type="button" onclick="$('#image-row<?php echo $image_row; ?>').remove();" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button></td>
</tr>
<?php $image_row++; ?>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td class="text-left">
<button type="button" onclick="addImage();" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button>
</td>
</tr>
</tfoot>
</table>

</div>

<div class="panel-footer">
<div class="text-right"><button type="submit" class="btn btn-primary"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button></div>
</div>

</div>

<?php echo form_close();?>

</div>

<script type="text/javascript">
var image_row = <?php echo $image_row; ?>;

function addImage()
{
    html = '<tr id="image-row' + image_row + '">';
    html += '<td class="text-left">';
    html += '<input type="text" name="banner_image[<?php echo $image_row; ?>][title]" class="form-control" value="">';
    html += '</td>';
    html += '<td class="text-left">';
    html += '<a href="" id="thumb_image_' + image_row + '" data-toggle="image" class="img-thumbnail">';
    html += '<img src="<?php echo $placeholder; ?>" data-placeholder="<?php echo $placeholder; ?>"/>';
    html += '</a>';
    html += '<input type="hidden" name="banner_image[' + image_row + '][image]" value="" id="input_image_' + image_row + '" />';
    html += '</td>';
    html += '<td class="text-right">';
    html += '<input type="text" name="banner_image[' + image_row + '][sort_order]" value="" placeholder="Sort Order" class="form-control" />';
    html += '</td>';
    html += '</tr>';

    $('#images tbody').append(html);

    image_row++;
}

</script>

Answer 1

Solved

After doing some investigation I found problem was to do with

name="banner_image[<?php echo $image_row; ?>][title]"

On script, I forgot to add it like

name="banner_image[' + image_row + '][title]"

Working now