JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
<form method="post" action="options.php">
    <div class="frame">
        <table class="form-table">
            <tr valign="top">
                <th class="label">Logo URL:</th>
                <td>
                    <input type="text" name="logo-setting" size="45" value="<?php echo esc_attr( get_option('logo-setting') ); ?>" />
                </td>
                <td>
                    <input name="op" class="option-man button" type="button" value="Upload Image" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row" class="label">Header:</th>
                <td>
                    <input type="text" name="main-header" size="45" value="<?php echo esc_attr( get_option('main-header') ); ?>" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row" class="label">Carousel-url:</th>
                <td>
                    <input type="text" name="carousel-image" size="45" value="<?php echo esc_attr( get_option('carousel-image') ); ?>" />
                </td>
                <td>
                    <input class="option-man button" type="button" value="Upload Image" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row" class="label">Message:</th>
                <td>
                    <input type="text" name="message-short" size="45" value="<?php echo esc_attr( get_option('message-short') ); ?>" />
                </td>
            </tr>
            <tr valign="top">
                <th scope="row" class="label">Question header:</th>
                <td>
                    <input type="text" name="question-cur" size="45"...

JavaScript

jQuery('.form-table').on('click', 'button, input[type="button"]', function () {

    // Get the previous input
    var input = $(this).closest('td').prev('td').find('input');

    // Get this button class
    alert($(this).attr('class'));

    // Get this button id
    alert($(this).attr('id'));


    // Your code here
    tb_show('', 'media-upload.php?TB_iframe=true');

    return false;

});