jQuery - set input array values from array

Question

The form have 3 variables: useredu_id[] hidden type , useredu_qual[] select type , useredu_detail[] text box .

I try to set values to using JavaScript array which generated using jQuery ajax and the code is given below. But values are not stored

var xx = 0;
var fieldHTML = ''
+ '<div class="form-row field_group">' 
+ $(".field_group_copy").html() 
+ '</div>';
$.each(data.result_qual, function(key, val1) {
    var detail = data.result_detail[key];
    $('input[name="useredu_id[]"]').eq(xx).val(key);
    $('input[name="useredu_qual[]"]').eq(xx).val(val1);
    $('input[name="useredu_detail[]"]').eq(xx).val(detail);
    $('body').find('.field_group:last').after(fieldHTML);
    ++xx;
});

Answer 1

processData function will handle the response. I have added a test JSON . You can call the function from your ajaz success method. If it is in the given format. Else you need some small changes according to the response

 $(function(){ // let data be your json response from ajax call var data = [ {id:1, qual:"BTECH", detail:"Engineering"}, {id:2, qual:"MTECH", detail:"Master Engineering"}, {id:3, qual:"BSC", detail:"Science"}, ]; processData(data); }); function processData(data){ $.each(data, function(index, value) { var fieldHTML = '' + '<div class="form-row field_group">' + $(".field_group_copy").html() + '</div>'; $('body').find('.data-container').append(fieldHTML); $('input[name="useredu_id[]"]').eq(index+1).val(value.id); $('select[name="useredu_qual[]"]').eq(index+1).val(value.qual); $('textarea[name="useredu_detail[]"]').eq(index+1).val(value.detail); }); } 

 .hide{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-row field_group_copy hide"> <input name="useredu_id[]" type="hidden"> <select name="useredu_qual[]"> <option value="">Select Qualification</option> <option value="BTECH">B.Tech</option> <option value="MTECH">M.Tech</option> <option value="BSC">BSC</option> <option value="MSC">MSC</option> </select> <textarea name="useredu_detail[]"></textarea> </div> <div class="data-container"> </div>