Apending key values to existing json object using jquery

Question

I have two forms. When first form gets submitted new json object will be created, as second form submits I want append those data to existing json object through jquery.

I try to achieve this on some how using object.assign() function, this will create new object by combining other objects but in my case I want to append for the existing object itself. as well If I want to Update the same object (only Values) on click of button how can I able to achieve this ?

$(document).ready(function() {
  var Json_form, Json_form_1, Json_form_2, jsonArray;
});

$('#submitOne').click(function() {
  $("#formOne").submit(function(e) {
    e.preventDefault();
    Json_form = ConvertFormToJSON(formOne);

  });
});

$('#submitTwo').click(function() {
  $("#formTwo").submit(function(e) {
    e.preventDefault();
    Json_form_1 = ConvertFormToJSON(formTwo);
    jsonArray = Object.assign(Json_form, Json_form_1);
    console.log(jsonArray);
  });
});

function ConvertFormToJSON(form) {
  var array = jQuery(form).serializeArray();
  var json = {};
  jQuery.each(array, function() {
    json[this.name] = this.value || '';
  });
  return json;
}

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

<form id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>

Answer 1

Your code worked for some reason, here it is vastly simplified

function ConvertFormToJSON(form) {
  var array = $(form).serializeArray();
  var json = {};
  $.each(array, function() {
    json[this.name] = this.value || '';
  });
  return json;
}


$(document).ready(function() {
  var Json_form, Json_form_1, Json_form_2, jsonArray;
  $("#formOne").on("submit", function(e) {
    e.preventDefault();
    Json_form = ConvertFormToJSON(this);
  });
  $("#formTwo").on("submit", function(e) {
    e.preventDefault();
    Json_form_1 = ConvertFormToJSON(this);
    jsonArray = Object.assign(Json_form, Json_form_1);
    console.log(jsonArray);
  });
});

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

<form id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>

But perhaps you meant to do this?

var json = {}
function ConvertFormToJSON(form) {
  var array = $(form).serializeArray();
  $.each(array, function() {
    json[this.name] = this.value || '';
  });
  console.log(json);
}

$(document).ready(function() {
  $(".form").on("submit", function(e) {
    e.preventDefault();
    ConvertFormToJSON(this);
  });
});

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

<form class="form" id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form class="form" id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>