JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form action="" method="POST" enctype="multipart/form-data">

          <div class="form-group">
            <label>Bulk Payments *:</label>
            <div class="radio">
              <label>
                <input type="radio" name="bulkPayments" value="Yes"> Yes
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="bulkPayments" value="No"> No
              </label>
            </div>
          </div>

          <div id="bulkContainer" class="bulk" style="display:none">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="clientName1">Client Name *:</label>
                  <input type="text" class="form-control" id="clientName1" name="clientName1" placeholder="" required autocomplete="one-time-code">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="attachments1">Attachment:</label>
                  <input type="file" class="form-control-file" id="attachments1" name="attachments1">
                </div>
              </div>

            </div>

          </div>

          <button id="addMore" class="btn">Add 1 more</button>
          
          </form>

JavaScript

$(function () {

      // Initially hide both divs
      $(".bulk").hide();
      $(".individual").hide();

      // Listen for changes in the radio button selection
      $("input[name='bulkPayments']").change(function() {
          if ($(this).val() === "Yes") {
              // Show the bulk div and hide the individual div
              $(".bulk").show();
              $(".individual").hide();
          } else if ($(this).val() === "No") {
              // Show the individual div and hide the bulk div
              $(".bulk").hide();
              $(".individual").show();
          }
      });

  });

  $(document).ready(function() {
            // Initialize the counter for generating unique names and IDs
            var counter = 1;

            // Add more sets when the "Add 1 more" button is clicked
            $("#addMore").click(function(event) {

                event.preventDefault(); // Prevent the default form submission
                
                // Clone the "bulk" section and update the attributes
                var newBulkSection = $(".bulk:first").clone();

                // Increment the counter for the next set and update the IDs and names
                counter++;
                newBulkSection.find("input[type=text]").attr("id", "clientName" + counter).attr("name", "clientName" + counter);
                newBulkSection.find("input[type=file]").attr("id", "attachments" + counter).attr("name", "attachments" + counter);

                // Clear input values in the new section (optional)
                newBulkSection.find("input[type=text]").val("");
                newBulkSection.find("input[type=file]").val("");

                // Append the newly modified section to the container
                $("#bulkContainer").append(newBulkSection);

                // Show the newly added section
                newBulkSection.show();
            });
        });