Javascript Duplicate a div in html and get the values from duplicated div's in form submit

Question

In my codeigniter view, I've a div containing a select box and a textbox. Also there is an 'Add more' button. My task is to duplicate this whole div when the add more button is clicked and when I submit the form I need to get the field values from the original div and duplicated div's. How Can I accomplish this? I tried duplicating div using jquery clone method. But couldn't find the solution.

Here is the code what I tried so far:

    <?php echo form_open("vehicle/addparts");?>
    <div class="row" id="addparts">
    <div class="col-md-6">
    <div class="form-group">
    <select class="form-control input-medium" name="parts">
    <option value="">select disabled>Select Parts</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>
    </div>
    </div>
    <div class="col-md-6">
    <div class="form-group">
    <label class="control-label">Quantity</label>
    <input type="text" name="partsquantity" id="partsquantity">
    </div>
    </div>
    </div>
    <div class="row">
    <input type="button" name="addmore" value="Add More" onClick="duplicate">
    </div>
    <?php echo form_close();?>
Javascript:

    <script>
    function duplicate() {    
    var original = document.getElementById('addparts');
    var clone = original.cloneNode(true);
    clone.id = "duplic";
    document.bodey.append(clone);
    }
    </script>

Answer 1

<?php echo form_open("vehicle/addparts");?>

        <div class="row" id="addparts">
            <div class="col-md-6">
                <div class="form-group">
                    <select class="form-control input-medium" name="parts[]">
                        <option value="">select disabled>Select Parts</option>
                        <option value="a">A</option>
                        <option value="b">B</option>
                        <option value="c">C</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label class="control-label">Quantity</label>
                    <input type="text" name="partsquantity[]" id="partsquantity">
                </div>
            </div>
        </div>
        <div class="row" id="div_button">
            <input type="button" name="addmore" value="Add More" id="addMore">
        </div>
          <?php echo form_close();?>

rename the of the inputs to be array so that if you submit the form it will submit all the input elements
you will receive a array of values with particular naming groupings

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

    $(document).ready(function() {

        var id = 1;

        // get item

        var item = $("#addparts");

        var before = $('#div_button');

        // initalize event click

       $('#addMore').on('click', function() {
            // clone addparts
            var clone = item.clone(true);
                // remove id
                clone.attr('id', '');
                // add class duplicate
                clone.attr('class', 'duplicate');
            // insert duplicate before button div
            before.before(clone);


       });

    });


</script>
enter code here