I made a textbox appear when a value is selected from a dropdown list in MVC.

I made a textbox appear when a value is selected from a dropdown list in MVC.

but the only first drop-down box is working with input text box appear.

also, another problem is when I select "other" and then I input my own text in the textbox. but this dropdown box cannot replace "other " to my customer value on the textbox.

please help me with those two problems.. thanks

@using (Html.BeginForm())
{

    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <table id="submissionTable" class="table table-striped table-hover table-bordered" style="font-size: 14px;">
            <thead>
                <tr class="info" style="height:50px; width:80px; font-size:14px;">
                    <th style="width:5%; text-align:center">
                        Barcode
                    </th>
                    <th style="width:5%; text-align:center">
                        Item Name
                    </th>
                    <th style="width:5%; text-align:center">
                        Scis Sold
                    </th>
                    <th style="width:5%; text-align:center">
                        Square Sold
                    </th>
                    <th style="width:5%; text-align:center">
                        Return
                    </th>
                    <th style="width:5%; text-align:center">
                        Po Rec
                    </th>
                    <th style="width:5%; text-align:center">
                        Inventory In
                    </th>
                    <th style="width:5%; text-align:center">
                        Inventory Out
                    </th>
                    <th>
                        Actual Qty
                    </th>
                    <th>
                        Reason
                    </th>


                </tr>
            </thead>
            <tbody>
                @for (int i = 0; i < Model.store_Invs.Count; i++)
                {
                    <tr>
                        @Html.HiddenFor(modelItem => modelItem.store_Invs[i].Id)
                        <td>
                            @Html.DisplayFor(modelItem => modelItem.store_Invs[i].Barcode_num)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => modelItem.store_Invs[i].Item_name)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Scis_sold, new { @style = "width: 40px; height: 35px", id = "Di" + i })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Square_sold, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Return_so, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Po_rec, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Po, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Adj, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => modelItem.store_Invs[i].Actual_qty, new { @style = "width: 40px; height: 35px" })
                        </td>
                        <td>

                            @Html.DropDownListFor(modelItem => modelItem.store_Invs[i].Reason, (SelectList)ViewBag.Reasonss, new { @style = "width: 100px;", id = "Re" + i })
                            Other:
                            <input type="text"   id="txtOther" />
                        </td>



                    </tr>
                }
            </tbody>
        </table>
        <div style="font-size:14px;">
            <h1 style="color:red;">DIRECTION</h1>
            <p style="color:red;">SCIS SOLD:  # UNITS SOLD in SCIS</p>
            <p style="color:red;">SQUARE SOLD : # Units Sold in Square</p>
            <p style="color:red;">RETURN :  Total # of Frames Returned</p>
            <p style="color:red;">PO-Rec :  # Units received from Warehouse / Ecomm</p>
            <p style="color:red;">Inventory-in: # Units incoming (store to store transfers / loans / adjustments)</p>
            <p style="color:red;">Inventory-Out: # Units outgoing (damages / displays / theft / store to store tranfers / loan)</p>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Submit" class="btn btn-default" style="font-size:20px" />
            </div>
        </div>

    </div>
}

@section Scripts {
    
    <script type="text/javascript">
            $(function () {
                
                $("#Re0").on("change", function () {
                    if ($(this).val() == "Other") {
                        $("#txtOther").show();
                        var x = document.getElementById("#txtOther").value;
                        alert(x);
                    } else {
                        $("#txtOther").hide();
                    }
                });
                $("#Re0").trigger("change");

            });
    </script>
   
    }