JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="fields">
  <div class="six wide required field">
    <label>First Name</label>
    <input id="fname_ship" name="Fname" type="text" placeholder="First Name">

  </div>

  <div class="six wide required field">
    <label>Last Name</label>
    <input id="lname_ship" name="LName" type="text" placeholder="Last Name">
  </div>
</div>

<div class="fields">

  <div class="seven wide required field">
    <label>Shipping Address</label>
    <input type="text" name="Address1" id="address1" placeholder="Street Address">
  </div>

  <div class="six wide field">
    <label>Address 2</label>
    <input id="address2" name="Address2" type="text" placeholder="Address 2">
  </div>
  <div class="five wide required field">
    <label>City</label>
    <input id="city_ship" name="City" type="text" placeholder="City">
  </div>
</div>

<button id="sub">Submit</button>

JavaScript

$(function() {
	$('#sub').on('click', function() {
    var email = $("#email").val();
    var fname = $("#fname_ship").val();
    var lname = $("#lname_ship").val();
    var addr1 = $("#address1").val();
    var addr2 = $("#address2").val();
    var country = $("#country").val();
    var mob = $("#mobileNo_ship").val();
    var city = $("#city_ship").val();

    alert(email, fname, lname, addr1, addr2, country, mob, city);
    
    var json = {};
    json['Reason'] = "Insert";
    json['Email'] = email;
    json['Fname'] = fname;
    json['Lname'] = lname;
    json['Addr1'] = addr1;
    json['Addr2'] = addr2;
    json['Country'] = country;
    json['MobileNo'] = mob;
    json['City'] = city;

		console.log(JSON.stringify(json));
    
		$.ajax({
      type: "POST",
      url: "someaction.do?action=saveData",
      data: json,
      dataType: application/json
		});
    
  })
});