JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div data-role="page">
    <div data-role="header" data-theme="f"> <a data-iconpos="notext" data-transition="pop" data-direction="reverse" data-role="button" data-icon="home" title="Home" href="index.html">Home</a>

         <h1>BENG & BSc</h1>

    </div>
    <form id="form">
    
        <ul data-role="listview" data-inset="true" id="GPA1">
            <li style="border:none">
                 <h1>Module 1:</h1>

            </li>
            <li data-role="fieldcontain" style="border:none">
                <label for="Sc1">Credits:</label>
                <input type="number" step="0.01" name="Sc1" id="Sc1" value="" data-clear-btn="true">
            </li>
            <li data-role="fieldcontain" style="border:none">
                <label for="Sgrade1" class="select">Grade:</label>
                <select class="Sgrade1" data-theme="f" id="Sgrade1">
                    <option value="-1">—</option>
                    <option value="4">A</option>
                    <option value="3.7">A-</option>
                    <option value="3.3">B+</option>
                    <option value="3">B</option>
                    <option value="2.7">B-</option>
                    <option value="2.3">C+</option>
                    <option value="2">C</option>
                    <option value="1.7">C-</option>
                    <option value="1.3">D+</option>
                    <option value="1">D</option>
                    <option value="0">F</option>
                </select>
            </li>
            <li style="border:none">
                 <h1>Module 2:</h1>

            </li>
            <li data-role="fieldcontain" style="border:none">
                <label for="Sc2">Credits:</label>
                <input type="number" step="0.01" name="Sc2" id="Sc2" value="" data-clear-btn="true">
            </li>
            <li data-role="fieldcontain" style="border:none">
                <label for="Sgrade2" class="select">Grade:</label>
               ...

JavaScript

$(document).ready(function(){
    $("#Sadd").click(function() {
	var tDiv = $('#GPA1');
    var i = $('#GPA1 h1').size() + 1;
	$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a></div></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><div class="ui-select"><div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-btn-f ui-corner-all ui-shadow" id="Sgrade5-button"><span class="Sgrade5">—</span><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></div></div></li>').appendTo(tDiv);
	 i++;
     return false;
	 });
 $("#Sremove").click(function() {
	 var i = $("#GPA1 h1").length();
                if( i > 5 ) {
                        $(this).parents('h1').remove();
                        i--;
                }
                return false;
							
  });			
});