Appending a div (multiple times) in Jquery without cloning

Question

I am still trying to work this out. Currently this is the way it looks, It works on JSFiddle but on my for it only clones once and the clone has data in it that when changed, changes the 1st item

I am trying to streamline my very large form to speed up the processes. I have a section that repeats multiple time that I want to reduce to having coded once with a button to add more if needed. The section cannot be cloned as each is separate and specific. Also note that they each need a unique identifier. As I have it not they ar "transectA", "transectB", etc. Below is a small snippet to give you an idea wof what I am working with. Each select actually has 12 options and there are 14 transects.

<div class="transect"> 
               <select name="transectA" id="transectA">
          <option value="">Transect A </option>
<option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
 <option value = "RIGHT/HOOP">RIGHT/HOOP</option>
 <option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
 <option value = "RIGHT/NONE">RIGHT/NONE</option>
 <option value = "CENTER/SED-CORE">CENTER/CORE</option>
 <option value = "CENTER/HOOP">CENTER/HOOP</option>
 <option value = "CENTER/CHLPHL-1">CENTER/TEMPLATE</option>
 <option value = "CENTER/NONE">CENTER/NONE</option>
 <option value = "LEFT/SED-CORE">LEFT/CORE</option>
 <option value = "LEFT/HOOP">LEFT/HOOP</option>
 <option value = "LEFT/CHLPHL-1">LEFT/TEMPLATE</option>
 <option value = "LEFT/NONE">LEFT/NONE</option>
            </select> </div>

I have attempted a couple of solutions (hide/show) & clone but neither give me a satisfactory result. All of the attempts I have tried with append seem to produce basically what the show/hide does.

    <script>
     $(document).ready(function() {
  var $transect = $('.transect');

$transect.on('change', 'select', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $transects = $('.transect');

    if($transects.length < 14 && !$parent.next('.transect').length) {
        var ltr = String.fromCharCode(65 + $transects.length),
            label = 'transect' + ltr;

        $transect
            .clone(true)
            .find('select')
               .attr('name', 'transect' + ltr)
                .attr('id', 'transect' + ltr)
                .find('option:eq(0)')
                    .text('Transect ' + ltr.toUpperCase())
                .end()
            .end()
            .insertAfter($parent);
    }
});
     })

</script>

As always, your help will be greatly appreciated

Can anyone advise me why all of these solutions work in JSFiddle but not on my form. Even the script above works on the fiddle but only clones once on the form

Answer 1

You should be able to combine clone and some DOM manipulation to get the desired affect: http://jsfiddle.net/fjJfk/2/

But you'll likely need to make this example match your own markup/situation.

var $transect = $('._25');

$transect.on('change', 'select', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $transects = $('._25');

    if($transects.length < 14 && !$parent.next('._25').length) {
        var ltr = String.fromCharCode(65 + $transects.length);

        $transect
            .clone(true)
            .find('select')
                .attr('name', 'transect' + ltr)
                .attr('id', 'transect' + ltr)
                .find('option:eq(0)')
                    .text('Transect ' + ltr)
                .end()
            .end()
            .insertAfter($parent);
    }
});

Answer 2

you could do something like this:

var counter = 0
$('.add-new-button').click(function(){
    $('#transectA').append('<option id="input ' + counter +'" value = "RIGHT/SED-CORE">RIGHT/CORE</option>');
    counter++;
});

This will add a new option to #transectA. You can use this method to add form fields elsewhere as well. You can use the counter to make sure it has a unique ID or name or whatever. Good luck

Answer 3

You can use following;

HTML:

<div id="tempSelect" style="display:none">
    <select name="transect" data-mini="true" id="transect">
        <option value="">Transect_ </option>
        <option value = "RIGHT/SED-CORE">RIGHT/CORE</option>
        <option value = "RIGHT/HOOP">RIGHT/HOOP</option>
        <option value = "RIGHT/CHLPHL-1">RIGHT/TEMPLATE</option>
        <option value = "RIGHT/NONE">RIGHT/NONE</option>
    </select>
</div

<fieldset>
    <div class="_100">

     </div>
</fieldset>

<input type="button" name="newSelect" id="newSelect" value="New"/>

JS:

$("#newSelect").on("click", function() {
    var lastSelect = $("._100 select").last().attr("name");
    if (lastSelect != undefined) {
        var temp = lastSelect.split("_");
        var id = parseInt(temp[1]) + 1;
    } else {
        var id = 0;
    }
    $("#tempSelect select").attr("name", "transect_" + id);
    $("#tempSelect select").attr("id", "transect_" + id);
    $("#tempSelect select option:first").text("Transect_" + id);
    $("._100").append($("#tempSelect").html());

});

Here is working demo: jsfiddle