JSFiddle - React, Tailwind, and code Playground

by Prasad Gavande

HTML

<!--get value in array and convert to JSON -->
<select id="ddl">
    <option id="firstName" name="firstName" value="firstName">First Name</option>
    <option id="lastName" name="lastName" value="lastName">last Name</option>
    <option id="contactNumber" name="contactNumber" value="contactNumber">contact Number</option>
</select>
<input type="text" name="txtValue" id="txtValue" />
<input type="submit" id="btnSubmit" value="Add" />
<table border=1 id="data">
    <tr>
        <td></td>
    </tr>
</table>
<p id="p"></p>
<input type="button" id="getJson" value="getJson" />

JavaScript

var i = 1;
var jsonString = "{";
$("#btnSubmit").click(function () {
    $("#data").append("<div id='div_" + i + ">");
    var value1 = $("#ddl").val();
    $("#data").append("<input type='text' id='ddlVal_" + i + "' value =" + value1 + ">");
    var value2 = $("#txtValue").val();
    $("#data").append("<input type='text' id='txtVal_" + i + "' value =" + value2 + ">");
    $("#data").append("<input type='button' class='remove' id='" + i + "' value ='Remove'>");

    // apend the string to jsonString
    $("p").append("{" + value1 + ":" + value2 + "}");

    $("#data").append("</div>");
    //   $("#data").append("</br>");

    i++;
});
$(document).on("click", ".remove", function () {
    var index = $(this).attr('id');
    $(this).remove();
    $('#ddlVal_' + index).remove();
    $('#txtVal_' + index).remove()
});