JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<input type="text" class="form-control" id="txtCopyright" placeholder="IN" />
<div class="input-group-btn nopadding">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span>

    </button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu" data-control-id="txtCopyright">
        <li><a>IN</a>

        </li>
        <li><a>BEFORE</a>

        </li>
        <li><a>AFTER</a>

        </li>
    </ul>
</div>
<input type="text" class="form-control" id="txtOtherInput" placeholder="Other" />
<div class="input-group-btn nopadding">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" id="myDropdown2" role="menu" data-control-id="txtOtherInput">
        <li><a>1</a>
        </li>
        <li><a>2</a>
        </li>
        <li><a>3</a>
        </li>
    </ul>
</div>

JavaScript

$(document).ready(function () {

    $('.dropdown-menu li').click(function () {
        $('#' + $(this).closest(".dropdown-menu").data("control-id")).val($(this).text());
    });

});