JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<table cellspacing="0" cellpadding="0" border="0">
    <thead class="">
        <tr>
            <th>Source Column</th>
            <th>Screen Name</th>
            <th>Salesforce Columns</th>
            <th>Map Columns</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>PO_CRDCHK_THRSH</span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
            
            </td>
            <td>
                <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td><span>NACE_DESC_TEXT </span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
                </td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
        <tr>
            <td><span>BLOCK_DELIVERY</span><br/>
                <label>Data Length:
                </label>
                <input type="text" size="2">
                </td>
            <td>
               <input type="text" size="10" id="acctSearch">
            </td>
            <td>
                <input type="text" size="10">
            </td>
            <td>
                <button type="button" class="btn">Map Fields</button>
            </td>
        </tr>
    </tbody>
</table>
            
<div id="divPopUp">
    <label id="searchedText"></label>
    <input type="text" id="text">Search fields
				  <div><input class="chk" id="mychk1" type="checkbox" value="Account : Account Phone (PHONE, 40 )" />Account : Account...

JavaScript

// https://forum.jquery.com/topic/getting-parent-window-filed-name-to-popup-window-//and-retrieving-checked-checkbox-values-from-popup-window-to-parent-window-using-//jquery#14737000005909035


$(function() {
    $("#divPopUp").dialog({
        resizable: true,
        autoOpen: false,
        width: 550,
        modal: true,
        buttons: {
            "Save": function() {
                var text = $(this).find( ":checkbox:checked" ).map(function() {
                    return this.value+' ';
                }).get().join();
                
                var obj = $(this).data("opener");
                $(obj).parents('td:first').siblings(':eq(2)').find(':text').val(text);
                $("#text").val("");
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close:function(){
            $(this).find( ":checkbox" ).removeAttr('checked');
            $(this).find('.mychk').show();
            $( this ).dialog( "close" );
        }
    });
    
    $('button.btn').on('click', function(){
        var title = $(this).parents('td:first').siblings(':eq(0)').find('span').text();
        $( "#divPopUp" ).data('opener', this).dialog( "option", "title", title ).dialog( "open" );
        var text = $(this).parents('td:first').siblings(':eq(2)').find(':input').val();
        if($.trim(text) != ''){
            $('#searchedText').html('Searched Text: '+text);
            var texts = text.split(" ,"); 
            $.each(texts, function(i, value){ $("#divPopUp").find(':checkbox[value="'+$.trim(value)+'"]').prop('checked', true);
            });
        }
    });
});
$(":checkbox").each(function () {
    $(this).add(this.nextSibling)
        .add(this.nextSibling.nextSibling)
        .wrapAll("<label class='mychk'></label>")
})
$("#text").keyup(function () {
    var re = new RegExp($(this).val(), "i")
    $('.mychk').each(function () {
        var text...