How to get the value of an input text inside the div of a nested table?

Question

I have nested table below with div elements and inputs within. I want to capture and get the value of one of the input type text when the button is click. Apparently right now, using my jquery codes below can't get one of the input text with a class="name" but the first input and the textarea were able to captured. So what is the exact code to capture the value of my second input text with a class = "name" when button is clicked. Thanks, here's the details below:

JQuery code:

 $(function () {
           $('.postrep').click(function () {
               //  e.preventDefault();
               var inputs = $(this).closest('div').find('input'); //finding the inputs inside the div
               var textin = $(this).closest('div').find('textarea'); //finding the textarea inside the div

               var dataObject = {

                   Id: inputs.first().val(), // getting the first input value in the div

                   name: inputs.first('input').next('.name').val(), // How do I get this second input value?

                   reply: textin.first().val() //getting the value of the first textarea in the div
               };
             });
          });

HTML:

<table id="mytable">  

    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p>  @Html.DisplayFor(modelItem => item.comment) </p>
  <p > <input type="button" id="like" name="like" value="Like" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" /></p>                                                                                                                                                                                         
   <div id="divReply" class ="divrep" >
           <table>

                 <tr >

                     <td >
                         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

                     <p> @Html.DisplayFor(modelItem => item2.reply)  </p>

                   </td>
                 </tr>

            </table>      

     <div> 
       <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">  
          <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
       </div>

       <br />
       <input type="text" id="namerep" name="name" class="name" />  <!-- I want to get the value of this -->

      <br />
      <textarea id="reply" name="reply" class="reply" ></textarea>  

         <br />

       <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 

     </div>
            <br />

  </div>
        </td>       
    </tr>


</table>

Answer 1

You can use id selector to get value of input box

$('#namerep').val();

But make sure that you don't have multiple input with same id, if you have multiple ids then remove id and use class="name" only to get the input value.

You can get input value with class="name" using jQuery attribute selector, please see below code -

$(function () {
           $('.postrep').click(function () {
               //  e.preventDefault();
               //store parent div in a variable and use it at multiple places
               var $parentDiv = $(this).closest('div');
               var inputs = $parentDiv.find('input'); //finding the inputs inside the div
               var textin = $parentDiv.find('textarea'); //finding the textarea inside the div

               var dataObject = {

                   Id: inputs.first().val(), // getting the first input value in the div

                   name: $parentDiv.find('input[class="name"]').val(), //get closest div and find input with class="name"

                   reply: textin.first().val() //getting the value of the first textarea in the div
               };
             });
          });

Answer 2

you can get

var name= $('#namerep').val();