Copy contents of field to all dynamically generated fields below it of type

Question

So I have a series of dynamically generated inputs using the following code:-

$(document).ready(function() {
    var max_fields      = 16; //maximum input boxes allowed
    var wrapper         = $(".GCSE_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div style="margin-top: 5px;"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" id="GCSESubject[]" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one" id="SubjectLevel[]" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]" id="SubjectGrade[]" class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one gcse_year" id="GCSEYear[]" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>'); //add input box
            $
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
}); 

What I am trying to do is to create a function that will copy the value of GCSEYear[] (the input next to where the C button is clicked), and copy the value into all subsequent GCSEYear[] inputs that exist, but not all inputs of type GCSEYear[] (there maybe inputs before, not after, that I don't want changed).

The following code is an example but populates all fields of class gcse_year and not just the subsequent/next fields of that type.

$(document).ready(function(){
$('a[id^="copy_gcse_all"]').click(function(){
    $('.gcse_year input').val($(this).closest('div').find('.gcse_year input').val())
});

I realise this is a relatively simple thing to do but I should be grateful if someone could point me in the right direction.

Answer 1

You can achieve what you require by placing a common class on the parent div you append on click of the Add button. You can then use closest() to select that div, and then nextAll() to get it's subsequent siblings before find() returns the GCSE year inputs you want to amend.

Here's a full working example with several other improvements to the logic:

var max_fields = 16;
var $wrapper = $(".GCSE_wrap");
var $add_button = $(".add_field_button");

$add_button.click(function(e) {
  e.preventDefault();
  if ($wrapper.find('> div').length < max_fields) {
    $wrapper.append('<div style="margin-top: 5px;" class="wrapper-item"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]"  class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control  spec_one gcse_year" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>');
  }
});

$wrapper.on("click", ".remove_field", function(e) { //user click on remove text
  e.preventDefault();
  $(this).parent('div').remove();
}).on('click', '.copy_gcse_all', function(e) {
  e.preventDefault();
  var $wrapperItem = $(this).closest('.wrapper-item');
  var year = $wrapperItem.find('.gcse_year').val();
  $wrapperItem.nextAll('.wrapper-item').find('.gcse_year').val(year);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add_field_button">Add</button>
<div class="GCSE_wrap"></div>

Also note that I removed all the id attributes from the long HTML string you append(), as this results in multiple elements sharing the same id which is invalid HTML.