JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css">
<div class="container p-5">
  <div class="mb-3 input-group">
    <div class="form-floating">
      <input type="text" class="form-control" id="base_url" placeholder="Web adresi">
      <label for="base_url">Web adresi</label>
    </div>
    <input type="button" class="btn btn-outline-info" id="btn-add" value="Kopyala" />
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_source" placeholder="utm_source">
        <label for="utm_source">utm_source</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_medium" placeholder="utm_medium">
        <label for="utm_medium">utm_medium</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_campaign" placeholder="utm_campaign">
        <label for="utm_campaign">utm_campaign</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_content" placeholder="utm_content">
        <label for="utm_content">utm_content</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_term" placeholder="utm_term">
        <label for="utm_term">utm_term</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3 form-floating">
        <input type="text" class="form-control" id="utm_adid" placeholder="utm_adid">
        <label for="utm_adid">utm_adid</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="mb-3...

JavaScript

jQuery(function($) {
	$(document).on('click', '#btn-add', function(e) {
  	var $params = $('#parameters');
    $params.append('<div class="row"><div class="col-md-6"><div class="mb-3 form-floating"><input type="text" class="form-control" placeholder="Anahtar"><label>Anahtar</label></div></div><div class="col-md-6"><div class="mb-3 form-floating"><input type="text" class="form-control" placeholder="Değer"><label>Değer</label></div></div></div>');
  });
});