JSFiddle - React, Tailwind, and code Playground

by kishan phadte

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <form class="form-inline" id="form1" method="post">
          <div class="form-group">
            <label for="exampleInputName2">Item 1</label>
            <input type="text" class="form-control" id="i1" placeholder="Jane Doe">
          </div>
          <div class="form-group">
            <label for="exampleInputEmail2">Item 2</label>
            <input type="text" class="form-control" id="i2" placeholder="[email protected]">
          </div>
          <button type="submit" class="btn btn-default" id="goNext">Go to Next Page</button>
        </form>
      </div>

      <!--Form2 starts here -->

      <form class="form-inline" id="form2" method="post">
        <div class="form-group">
          <label for="exampleInputName2">Item 1</label>
          <input type="text" class="form-control" id="l1" placeholder="Jane Doe">
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Item 2</label>
          <input type="text" class="form-control" id="l2" placeholder="[email protected]">
        </div>
        <p id="finalValue"></p>
        <button type="submit" class="btn btn-default" id="total">Go to Next Page</button>
      </form>


    </div>
  </div>
</body>

JavaScript

$(document).ready(function() {
  $("#form2").hide();
  var item1, item2;
  $("#goNext").click(function(e) {
    if ($("#i1").val().length && $("#i2").val().length > 0) {
      $(this).hide();
      $("#form2").show();
      item1 = $("#i1").val();
      item2 = $("#i2").val();
      alert(item2);
      
     x= $("#l1").val(item1);
      x1=$("#l2").val(item2);
    } else
      alert("Error");
  });

  $("#total").click(function(e){
    $("#finalValue").val(x+x1);
  })
});