inserting multiple fields with same name as a single record into database

Question

In my application there is a form which have a two select field , in which the last select is set to have a multiple selection. What I need is to insert the first pair of select field to be inserted as a single record into the database. When I try to do this using a for loop I am able to insert the record as a single row until and unless I select only one value for my 2nd select field. But If I select multiple fields for second select, the records isn't proper.

Also here user can add more divs by clicking ADD button

<div id="scope-brand-div">
    <div class="col-md-6">
        <div class="form-group">
            <label for="scope">Project Scope</label>
            <select name="scope[]" class="form-control scope-select">
                <option value=""></option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="brands_used">Brands Used</label>
            <select multiple name="brands_used[]" class="form-control brand-select">
                <option value=""></option>
                <option>D</option>
                <option>E</option>
                <option>F</option>
            </select>
        </div>
    </div>
</div>

php

$s = $this->input->post('scope');
$b = $this->input->post('brands_used');

foreach( $s as $key => $n ) {
  $rows[] = $n.",".$b[$key];
}
print_r($rows);

SCENARIO 1

If I select single fields for both select, the output will be:

A, D
B, E

SCENARIO 2

If I select a multiple filed for the second select like A,(D,E) and B,F. Using the same loop above the result will be:

A, D
B, E

How can I insert the same fields If I select multiple fields for 2nd select field ad provided the user can add more divs same like this.

Edit 1

<div id="scope-brand-div">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="scope"><?php echo $this->lang->line('xin_project_scope');?></label>
                    <select name="scope[]" class="form-control select-border-color border-warning scope-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_project_scope');?>">
                      <option value=""></option>
                      <?php foreach($all_project_scope as $scope) { ?>
                      <option value="<?php echo $scope->scope_name; ?>"><?php echo $scope->scope_name; ?></option>
                      <?php } ?>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group brands-ajax">
                    <label for="brands_used"><?php echo $this->lang->line('xin_brands_used');?></label>
                    <select multiple name="brands_used[]" class="form-control select-border-color border-warning brand-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_brands_used');?>">
                    <option value=""></option>
                      <?php foreach($all_brands as $brands) { ?>
                      <option value="<?php echo $brands->brand_name; ?>"><?php echo $brands->brand_name; ?></option>
                      <?php } ?>
                    </select>
                  </div>
                </div>
              </div>

<script type="text/javascript">
$(document).ready(function(){
    $('#add-new').click(function(){
    var invoice_items = '<div id="scope-brand-div">'
                        + '<div class="col-md-6">'
                        +'<div class="form-group">'
                        + '<label for="scope"><?php echo $this->lang->line('xin_project_scope');?></label>'
                        +'<select name="scope[]" class="form-control scope-select"  data-placeholder="<?php echo $this->lang->line('xin_project_scope');?>">'
                        +'<option value=""></option>'
                        <?php foreach($all_project_scope as $scope) { ?>
                        +'<option value="<?php echo $scope->scope_name; ?>"><?php echo $scope->scope_name; ?></option>'
                        <?php } ?>
                        + '</select>'
                        + '</div>'
                        + '</div>'
                        + '<div class="col-md-6">'
                        + '<div class="form-group brands-ajax">'
                        + '<label for="brands_used"><?php echo $this->lang->line('xin_brands_used');?></label>'
                        +'<select name="brands_used[]" class="form-control brand-select" data-placeholder="<?php echo $this->lang->line('xin_brands_used');?>">'
                        +'<option value=""></option>'
                        <?php foreach($all_brands as $brands) { ?>
                        +'<option value="<?php echo $brands->brand_name; ?>"><?php echo $brands->brand_name; ?></option>'
                        <?php } ?>
                        +'</select>'
                        +'</div>'
                        + '</div>'
                        +'</div>'
    $('#clone-parent').append(invoice_items).fadeIn(500);
});
});
</script>

<?php
    public function add_project() {
    $s = $this->input->post('scope');
    $b = $this->input->post('brands_used');
    foreach( $s as $key => $n ) {
       $rows[] = $n.",".$b[$key];
        //insert query
      }
}

?>

Edit 2

echo var_export($this->input->post('brands_used'));

array (
0 => 
 array (
   0 => 'Opterna',
   ),
1 => 
 array (
    0 => 'Norden',
    ),
2 => 'Opterna',
)

echo var_export($this->input->post('scope'));

array (
 0 => 'ACS',
 1 => 'SMA TV',
 )

Answer 1

About your html...

• the for in your label only works properly if associated with the id attribute of your field.
• <option> tags which have identical values in the text and in the value attribute can have their value attribute removed entirely -- it works exactly the same at submission time but removes bloat from your html.
• I am appending a counter to the id and the clonable class to your outermost <div> to aid the javascript cloning process.
• brands_used[][] needs to be brands_used[0][] to prevent unwanted incrementation of the first level index.

Rewrite:

<div id="scope-brand-div0" class="clonable">
    <div class="col-md-6">
        <div class="form-group">
            <label for="scope0"><?php echo $this->lang->line('xin_project_scope'); ?></label>
            <select id="scope0" name="scope[]" class="form-control select-border-color border-warning scope-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_project_scope'); ?>">
                <option></option>
                <?php foreach ($all_project_scope as $scope) {
                    echo "<option>{$scope->scope_name}</option>";
                } ?>
            </select>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group brands-ajax">
            <label for="brands_used0"><?php echo $this->lang->line('xin_brands_used'); ?></label>
            <select multiple id="brands_used0" name="brands_used[0][]" class="form-control select-border-color border-warning brand-select" data-plugin="select_hrm" data-placeholder="<?php echo $this->lang->line('xin_brands_used'); ?>">
                <option></option>
                <?php foreach ($all_brands as $brands) {
                    echo "<option>{$brands->brand_name}</option>";
                } ?>
            </select>
        </div>
    </div>
</div>

---

As for your cloning javascript... I advise that you use clone() to clean up your script. Perhaps draw some inspiration from https://stackoverflow.com/a/8018242/2943403.

You will need to ensure that a "counter" is implemented. The original/hardcoded set of fields will have 0 as the counter; all additional sets of fields should replace all 0 values with the next incremental integer. This will keep all related fields in their related groups at submission time.

Specifically:

• <div id="scope-brand-div0"> (if you actually need it) will become <div id="scope-brand-div1">
• <label for="scope0"> will become <label for="scope1">
• <select id="scope0"> will become <select id="scope1">
• <label for="brands_used0"> will become <label for="brands_used1">
• <select multiple id="brands_used0" name="brands_used[0][]" will become <select multiple id="brands_used1" name="brands_used[1][]"

The, of course, if the Add button is clicked a second time, all of the 1's need to become 2's.

---

As for processing your $_POST data, I expect to receive a structure like this: (don't stop tweaking your form until it delivers this most-appropriate structure)

$_POST = [
    'scope' => [
        'ACS',
        'SMA TV'
     ],
     'brands_used' => [
         [
             'Opterna',
             'Norden'
         ],
         [
             'Opterna'
         ]
     ]
];

This means you can use the same first level keys to access related scope and brands_used values. As you traverse the data, scope data will be a string and brands_used will be an array.

To iterate:

// make an object-oriented mysqli connection ($mysqli)
$stmt = $mysqli->prepare("INSERT INTO tablensme (scope, brand_used) VALUES (?, ?)");
$stmt->bind_param('ss', $scope, $brand_used);
$posted = $this->input->post();
foreach ($posted['scope'] as $index => $scope) {
    // use $scope string
    foreach ($posted['brands_used'][$index] as $brand_used) {
        // use $brand_used string
        $stmt->execute();
    }
}

Assuming you have a normalized db table structure and want to write one scope value and one brand_used value per table row, set up your prepared statement and bound variables prior to the loop, then call execute() from the inner loop.

This is 100% NOT TESTED, but the intended result from inserting the sample data would be the following new rows:

('ACS', 'Opterna'),
('ACS', 'Norden'),
('SMA TV', 'Opterna')