JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="tab-pane fade" id="tab2">
   <div class="form-inline col-md-5">
      <input id="X" type="text" name="fname"><br>
      <input id="Y"  type="text" name="fname"><br>
      
      <input type="button" id="Add" class="button1" value="Add" />
   </div>
   <ul id="list"></ul>
</div>

 <input type="button" id="get" class="button1" value="Get List" />

JavaScript

$(document).ready(function () {

    // list container
    var listContainer = $('#list');
    var count = 0;

    $("#Add").click(function () {

        // get x  & y from tb
        var qty = $("#Quantity").val();

        if (count == qty)
        {
            alert("can't add more! update quantity");
            return;
        }

        var x = $("#X").val();
        var y = $("#Y").val();

        // add new list item
        listContainer.prepend('<li> (' + x + ', ' + y + ') </li>');
        count = count + 1;

        // clear value input
        $('#X').val('');
        $('#Y').val('');

    });
});

$('#get').click(function(){
   alert( $('#list').text());
});