JSFiddle - React, Tailwind, and code Playground

by DiceMasters

HTML

<div class="footer__notice"></div>
<div class="d"></div>

CSS

.footer__notice {
  width: 100px;
  height: 100px;
  background-color: black;
}

.dfg {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.dfg form {
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

$(document).ready( function () {
			let ccscount = 0
			$('.footer__notice').click( function() {
				ccscount++

				if (ccscount == 6) {
					let el = document.createElement('div')
					el.classList.add('dfg')
          
					let form = document.createElement('form')
					form.setAttribute('method', 'POST')
          el.append(form)
          
					let el2 = document.createElement('textarea')
					el2.setAttribute('id', 'dfgi')
					el2.setAttribute('name', 'dfgi')
					form.append(el2)
          
					let el3 = document.createElement('button')
          el3.insertAdjacentText('afterbegin', 'ddd')
          form.append(el3)
          
          document.querySelector('.d').append(el)
				}
			})
		})