JSFiddle - React, Tailwind, and code Playground

by Mrt Ja

HTML

<button id="addAcc" class="btn" title="Ein-/Auszahlung hinzufĂĽgen">populate</button>
<div id="modalBody"></div>

<div class="accRow">

<div class="accRowHeader">
<div><p>1. Zahlung</p></div><div></div>
</div>

<div class="inputRow">
<div class="inputM">
<input name="payType" class="payType" type="text" value="" placeholder="Ein-/Auszahlung">
<label for="payType">Ein-/Auszahlung</label>
</div>
<div class="inputS">
<input name="payPro" class="payPro" type="text" value="" placeholder="Anbieter">
<label for="payPro">Anbieter</label>
</div>
</div>

<div class="inputRow">
<div class="inputM">
<input name="payDate" class="payDate" type="text" value="" placeholder="TT.MM.JJJJ">
<label for="payDate">Datum</label>
</div>
<div class="inputS">
<input name="payAmount" class="payAmount" type="text" value="" placeholder="0000,00">
<label for="payAmount">Menge</label>
</div>
</div>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
body {background: white;}
#modalBody {border: 1px solid black; width: 600px; margin-bottom: 30px;}


input {
  margin: 30px 30px 0 30px;
  border: none;
  border-bottom: 1px solid #ccc;
  height: 30px;
  font-weight: 400;
  font-size: 16px;
  color: #666;
}
input:focus, select:focus {
  outline:none;
  border-bottom: 1px solid #666;
  color: #000;
}
input[type="text"][disabled] {
   color: #bfbfbf;
	 background: #fff;
}
label {
  margin: 0 30px 0 30px;
  height: 15px;
  font-weight: 300;
  font-size: 12px;
}
select {
	min-height: 30px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0;
	color: #666;
	border-bottom: 1px solid #ccc;
}
select:hover {
	cursor: pointer;
}
.calcRow, inputRow {
	display: flex;
}
.calcInput{
	width: 60%;
}
.calcSelect {
	width: 30%;
	margin: 30px 30px 0 0;
}
.inputRow {
  display: flex;
}
.inputM, .inputS {
  display: flex;
  flex-direction: column;
}
.inputM {
  min-width: 70%;
}
.inputS {
  min-width: 30%;
}
.inputS > input, .inputS > label {
  margin-left: 0;
}

.accRow {
  background: #f0f0f0;
}
.accRowHeader {
  display: flex;
  align-items: center;
  padding: 0 30px; 0 30px;
  height: 60px;
  background: #ccc;
}

JavaScript

document.getElementById('addAcc').addEventListener('click', function() {


	document.getElementById("modalBody").innerHTML += "Hallo";



});

document.getElementsByClassName("payType")[i].value = arrACCOUNT[i].ssPayment_amount