JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="row">
                        <div class="col-lg-4">
                            <fieldset class="form-group">
                                <label class="form-label semibold control-label" for="SearchType">Search Type</label>
                                <select class="select2-arrow" id="txtsearchType" name="searchType">
                                    <option>-- Select Search Type --</option>
                                    <option value="getgeneric">Generic Search</option>
                                    <option value="getbrand">Brand Search</option>
                                    <option value="getcompany">Company Search</option>
                                    <option value="getsubstitue">Substitute Search</option>
                                    <option value="gettherapeutic">Therapeutic wise Search</option>
                                </select>
                                <span class="field-validation-valid" data-valmsg-for="SearchType" data-valmsg-replace="true" style="color:red"></span>
                            </fieldset>
                        </div>
                        <div class="col-lg-4">
                            <fieldset class="form-group">
                                <label class="form-label semibold control-label">Tittle</label>
                                <input class="form-control" data-val="true" data-val-required="Enter Product Name" id="txtName" name="ProductName" placeholder="Search Name" type="text" value="" />
                                <span class="field-validation-valid" data-valmsg-for="ProductName" data-valmsg-replace="true" style="color:red"></span>
                            </fieldset>
                        </div>
                        <input type="submit" name="Submit" value="Search" id="btnSubmit" class="btn btn-rounded btn-inline btn-success" />

                    </div>

JavaScript

$(document).ready(function () {
        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            var search = jQuery('[id$=txtsearchType]').val();
            var tittle = jQuery('[id$=txtName]').val();

            if (search != ' ' && tittle != '') {

                if (search == "getgeneric" || search == "getbrand") {
                    $.ajax({
                        type: "GET",
                        contentType: "application/json; charset=utf-8",
                        url: 'http://204.93.193.244:8080/apiems/' + search + '/' + tittle,
                        //data: "{ } ",
                        dataType: "json",
                        success: function (data) {
                            var items = '';
                            $.each(data, function (i, item) {
                                $("#findValue").show();
                                var rows = "<tr>"
                               + "<td>" + (i + 1) + "</td>"
                               + "<td>" + item[1] + "</td>"
                               + "<td>" + item[5] + "</td>"
                               + "<td>" + item[2] + "</td>"
                               + "<td>" + item[3] + "</td>"
                               + "<td>" + item[4] + "</td>"
                               + "<td>" + item[6] + "</td>"
                               + "<td>" + '<a href="@Url.Action("ViewProduct", "RestApi")?ID=' + item[0] + '&Name=' + data[i] + '&type=' + search + '"" class="glyphicon glyphicon-eye-open" title="View"></a>'
                               + "</tr>";
                                    $('#example tbody').append(rows);
                                });
                            },
                            error: function (result) {
                                alert("Error" + result);
                            }
                        });
                    }
                    else if (search == "getcompany") {

                    ...