JSFiddle - React, Tailwind, and code Playground

by Stefan Sturm

HTML

<button id="hide1" onclick="myFunction()">  service </button>

    <div id="demomain"></div>

    <form method="post" id="formid1" name="form 1">
        <input type="button" value="1" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid2" name="abc1">
        <input type="button" value="2" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid3" name="abc2">
        <input type="button" value="3" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid4" name="abc3">
        <input type="button" value="4" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid5" name="abc4">
        <input type="button" value="5" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid6" name="abc5">
        <input type="button" value="6" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid7" name="abc6">
        <input type="button" value="7" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid8" name="abc7">
        <input type="button" value="8" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid9" name="abc8">
        <input type="button" value="9z" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid1" name="abc9">
        <input type="button" value="10" style="height: 115px; width: 300px;">
    </form>
    <form method="post" id="formid10" name="abc10">
        <input type="button" value="0" style="height: 115px; width: 300px;">
    </form>

JavaScript

function myFunction() {
        var x = document.getElementById("formid1").name;
        document.getElementById("demomain").innerHTML = "The name of the form is: " + x;
    }