JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>



<h3>악기연주 버프효과 합 계산기 + 풍년가 채집속도 완성본. By [Lute]kopory.</h3>



<br>
<h5>그랜마 음유(5): <input type="checkbox" id="Grm" value = "5"></h5>
<p>타이틀(0~10): <input type = text id = "Title" value = "0"></p>
<p>2차 타이틀(0~9): <input type = text id = "Title2" value = "0"></p>
<h5>악기</h5>
<p>악기(글루미 16,리라 첼로 바이올린 10~11, 나머지 8): <input type = text id = "Instrument" value = "0"></p>
<p>악기 인챈트 접두(0~5): <input type = text id = "Prefix" value = "0"></p>
<p>악기 인챈트 접미 코드: <input type="checkbox" id="S" ></p>
<p>악기(세공 0~20): <input type = text id = "Cr" value = "0"></p>

<h5> 장비</h5>
<p>코러스(2~3) 머리: <input type = text id = "Ch" value = "0"></p>
<p>앙코르(3) 옷: <input type="checkbox" id="AS"></p>
<p>솔리스트(2) 장갑:  <input type="checkbox" id="Sol"> ,솔리스트(2) 신발:  <input type="checkbox" id="Sol0"></p>

<p>안단테(1) 악세 왼쪽: <input type="checkbox" id="Et0"> ,안단테(1) 악세 오른쪽: <input type="checkbox" id="Et01"></p>

<p>악기연주 1랭크, 노래 1랭크 (30): <input type = text id = "R" value = "30"></p>
<h5>풍년가</h5>
 <p>풍년가 채집속도세공 레벨 총합</p>
  <input type="text" id="s1" value="0">
 
  <p>보통연주세공 총합</p>
  <input type="text" id="s3" value="0"><br><br>

<button onclick="calcmabi()">계산하기</button>





<p id="demo"></p>
<p id = "demo2"></p>

<script>
function calcmabi() {
var T1 =parseInt(document.getElementById("Title").value);
var T2 =parseInt(document.getElementById("Title2").value);
var P =parseInt(document.getElementById("Prefix").value);

var I =parseInt(document.getElementById("Instrument").value);
var Cr =parseInt(document.getElementById("Cr").value);

var Grm =0;
var K =document.getElementById("Grm").checked
var c = 1;
if(c=K){
Grm = 5;
}

var S =0;
var S1 =document.getElementById("S").checked
if(c=S1){
S = 1;
}

var AS =0;
var AS1 =document.getElementById("AS").checked
if(c=AS1){
AS = 3;
}

var Sol =0;
var Sol1 =document.getElementById("Sol").checked
if(c=Sol1){
Sol = 2;
}
var Sol01 =0;
var Sol11 =document.getElementById("Sol0").checked
if(c=Sol11){
Sol01 = 2;
}

var Et =0;
var Et11...