HTML + JQuery (CSOM) to add multiple item to a Sharepoint list and get their IDs

Question

Hi everyone.
I try to use HTML + JQuery in CEWP to build some sort of analog of InfoPath's repeating table in order to be able to insert multiple items in a Sharepoint list using CSOM.
The current task is to get the IDs of inserted items (in order to use those IDs later to add attachments to the list items) as soon as they are added to the list. I've tried several ways but couldn't get the IDs of all inserted items. Usually
I get "-1" as an ID for every item except the last one, which returns me the correct ID. 
Bellow is the code.
<script src="/testsite1/SiteAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/testsite1/SiteAssets/jquery.SPServices.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var click = 1;
$("#btn_id_1").click(function() {
click ++;
$("#tr_id_1").clone().appendTo("#tbl_id_1").attr("id", "tr_id_" + click.toString()).find("input").val("");
$("#btn_id_2").click(function() {
Save();
function Save() {
var ctx = new SP.ClientContext.get_current();
var taskList = ctx.get_web().get_lists().getByTitle('Tasks');
var taskItemInfo = new SP.ListItemCreationInformation();
var vendor;
var certname;
var certid;
$("#tbl_id_1 tr").each(function() {
vendor = ($(this).find(".vendor")).val();
certname = ($(this).find(".certname")).val();
certid = ($(this).find(".certid")).val();
newTask = taskList.addItem(taskItemInfo);
newTask.set_item('Title', vendor);
newTask.set_item('Request_', certname);
newTask.set_item('h', certid);
newTask.update();
ctx.load(newTask);
ctx.executeQueryAsync(addTaskSuccess, addTaskFailure);
//timeout();
function timeout() {
alert ("!!!");
function addTaskSuccess(sender, args) {
alert(newTask.get_id());
//AddAttachment(newTask.get_id())
function addTaskFailure(sender, args) {
//alert(newTask.get_id());
alert("no");
window.location = window.location.pathname;
</script>
<div id="div_id_1" class="div_class_1">
<table id="tbl_id_1">
<tbody>
<tr id="tr_id_1">
<td>Vendor:<br><input type="text" class="vendor" /></td>
<td>Cert. Name:<br><input type="text" class="certname" /></td>
<td>Cert. ID:<br><input type="text" class="certid" /></td>
<td>Attachment:<br><input type="file" class="attachment" /></td>
</tr>
</tbody>
</table>
<div><button id="btn_id_1" type="button" width="10" height="10">+</button></div>
<div><button id="btn_id_2" type="button">Save</button></div>
</div>

Answer 1

Here's a working solution (thanks to
this guy)
<script src="/testsite1/SiteAssets/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="/testsite1/SiteAssets/jquery.SPServices.min.js" type="text/javascript"></script>
<script type="text/javascript">
var array = [];
$(document).ready(function() {
var click = 1;
$("#btn_id_1").click(function() {
click ++;
$("#tr_id_1").clone().appendTo("#tbl_id_1").attr("id", "tr_id_" + click.toString()).find("input").val("");
$("#btn_id_2").click(function() {
//Save();
//Call();
var asyncPromises = Save();
asyncPromises.done(function(result) {
//alert(array.length);
console.log(array.length);
for (var i=0; i<array.length; i++) {
//alert(array[i].get_id());
console.log(array[i].get_id());
asyncPromises.fail(function(result) {
function Save() {
var buildDeferredSaves = $.Deferred(function() {
//var array = [];
var ctx = new SP.ClientContext.get_current();
var taskList = ctx.get_web().get_lists().getByTitle('Tasks');
var taskItemInfo;
var vendor;
var certname;
var certid;
$("#tbl_id_1 tr").each(function() {
vendor = ($(this).find(".vendor")).val();
certname = ($(this).find(".certname")).val();
certid = ($(this).find(".certid")).val();
taskItemInfo = new SP.ListItemCreationInformation();
newTask = taskList.addItem(taskItemInfo);
newTask.set_item('Title', vendor);
newTask.set_item('Request_', certname);
newTask.set_item('h', certid);
newTask.update();
ctx.load(newTask);
array.push(newTask);
ctx.executeQueryAsync(
function() {
// Successful
buildDeferredSaves.resolve();
function(sender, args) {
// Failure
buildDeferredSaves.reject(args.get_message());
return buildDeferredSaves.promise();
</script>
<div id="div_id_1" class="div_class_1">
<table id="tbl_id_1">
<tbody>
<tr id="tr_id_1">
<td>Vendor:<br><input type="text" class="vendor" /></td>
<td>Cert. Name:<br><input type="text" class="certname" /></td>
<td>Cert. ID:<br><input type="text" class="certid" /></td>
<td>Attachment:<br><input type="file" class="attachment" /></td>
</tr>
</tbody>
</table>
<div><button id="btn_id_1" type="button" width="10" height="10">+</button></div>
<div><button id="btn_id_2" type="button">Save</button></div>
</div>