JSFiddle - React, Tailwind, and code Playground

by Yelesee

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Mirab</title>
  </head>
  <body>
    <header>
      <div class="container">
        <p>به نام خدا</p>
      </div>
    </header>
    <div class="container">
      <form>
        <div class="form-row" id="1">
          <div class="form-row col-md-12">
            <div class="form-group col-md-3">
              <label for="inputnums">Enter the number of your inputs:</label>
              <input type="text" class="form-control" id="inputnums" name="inputnums" placeholder="Enter inputnums">
            </div>
            <div class="form-group col-md-3">
              <label for="outputnums">Enter the number of your outputs:</label>
              <input type="text" class="form-control" id="outputnums" name="outputnums" placeholder="Enter outputnums">
            </div>
            <div class="form-group col-md-3">
              <label for="rulenums">Enter the number of your rules:</label>
              <input type="text" class="form-control" id="rulenums" name="rulenums" placeholder="Enter rulenums">
            </div>
            <div class="form-group col-md-3">
              <input type="button" class="btn btn-primary" id="registerNums" value="register nums">
            </div>
          </div>
        </div>

        <div class="form-row" id="2">

        </div>

        <div class="form-row" id="3">
          <div class="form-row col-md-12">
            <div class="form-group col-md-3">
              <button type="submit" class="btn btn-primary" id="submit">Submit</button>
            </div>
          </div>
        </div>
...

JavaScript

<script type="text/javascript">
      
      $(document).ready(function(){
        $("#registerNums").on('click',function(){
          var inputnums = parseInt($("#inputnums").val());
          alert(inputnums);
          var outputnums = parseInt($("#outputnums").val());
          alert(outputnums);
          var rulenums = parseInt($("#rulenums").val());
          for(var i=1; i < inputnums + 1; i++){
            var inputmems =
            '<div class="form-row">'+
              '<div class="form-row">'+
                '<div class="form-group col-md-3">'+
                  '<label for="inputmems'+ i +'">Enter the number of your input'+ i +' membership functions:</label>'+
                  '<input type="text" class="form-control" id="inputmems'+ i +'" name="inputmems'+ i +'" placeholder="Enter inputmems">'+
                '</div>'+
                '<div class="form-group col-md-3">'+
                  '<label for="inputname'+ i +'">Enter the name of your input'+ i +' membership functions:</label>'+
                  '<input type="text" class="form-control" id="inputname'+ i +'" name="inputname'+ i +'" placeholder="Enter inputname">'+
                '</div>'+
                '<div class="form-group col-md-3">'+
                  '<label for="inputrange'+ i +'">Enter the range of your input'+ i +' membership functions:</label>'+
                  '<input type="text" class="form-control" id="inputrange'+ i +'" name="inputrange'+ i +'" placeholder="Enter inputrange">'+
                '</div>'+
                '<div class="form-group col-md-3">'+
                  '<input type="button" class="btn btn-primary" id="registerMems" value="register mems">'+
                  '<script type="text/javascript">'+
                    '$(document).ready(function(){'+
                      '$(".registerMems").on("click",function(){'
                        'var inputmems = parseInt($(this).parent().parent().find("#inputmems").val())'+
                         ...